WEB前端 -- JavaScript获取cookie

最新推荐文章于 2025-07-17 17:24:19 发布

风中的妖娆落叶

最新推荐文章于 2025-07-17 17:24:19 发布

阅读量1.5w

点赞数 5

分类专栏：前端文章标签： cookie JavaScript

前端专栏收录该内容

30 篇文章

订阅专栏

本文介绍如何使用JavaScript通过document.cookie获取所有cookie的集合，并提供自定义函数来获取单个cookie值及将所有cookie值保存为对象属性的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

JavaScript 通过 document.cookie 来获取 cookie 。

遗憾的是，document.cookie 只能获取所有 cookie 的集合，不能获取单个 cookie 。

例如，获取当前cookie集合：

<input id="demo1" type="button" value="获取cookie" />
<script type="text/javascript">
document.getElementById("demo1").onclick=function(){
    alert(document.cookie);
}
</script>

实例演示：

我们可以自定义一个函数来获取单个 cookie 的值。

我们知道，cookie 集合的格式是这样的：
name1=value1 ; name2=value2 ; name3=value3 ; ...
将 cookie 以分号（;）分组，再以等号（=）分组，就能得到每个 cookie 的名称和值。

/**
  *  func  getCookie()  获取单个cookie的值
  *  pram  cookieName  cookie的名称
**/
function getCookie(cookieName){
    var cookieObj={},
          cookieSplit=[],
          // 以分号（;）分组
          cookieArr=document.cookie.split(";");
    for(var i=0,len=cookieArr.length;i<len;i++)
        if(cookieArr[i]) {
            // 以等号（=）分组
            cookieSplit=cookieArr[i].split("=");
            // Trim() 是自定义的函数，用来删除字符串两边的空格
            cookieObj[cookieSplit[0].Trim()]=cookieSplit[1].Trim();
        }
    return cookieObj[cookieName];
}

例如，获取 name 的值：

getCookie["name"];

对上面的代码稍作修改，就可将 cookie 的值保存为对象的属性，使用时非常方便。代码如下：

/**
  *  func  getCookieObj()  获取所有cookie的值并将其保存为对象的属性
**/
function getCookieObj(){
    var cookieObj={},
          cookieSplit=[],
          // 以分号（;）分组
          cookieArr=document.cookie.split(";");
    for(var i=0,len=cookieArr.length;i<len;i++)
        if(cookieArr[i]) {
            // 以等号（=）分组
            cookieSplit=cookieArr[i].split("=");
            // Trim() 是自定义的函数，用来删除字符串两边的空格
            cookieObj[cookieSplit[0].Trim()]=cookieSplit[1].Trim();
        }
    return cookieObj;
}

例如，获取 name 的值：

var cookieObj=getCookieObj();
cookieObj.name;

举例，设置并获取cookie的值：

<table>
    <tr>
        <td>用户名：</td>
        <td><input id="demo_input1" type="text" /></td>
        <td>密码：</td>
        <td><input id="demo_input2" type="text" /></td>
    </tr>
    <tr>
        <td colspan="2" align="center"><input id="demo_button1" type="button" value="设置Cookie" /></td>
        <td colspan="2" align="center"><input id="demo_button2" type="button" value="获取Cookie" /></td>
    </tr>
</table>
<script type="text/javascript">
    document.getElementById("demo_button1").onclick=function(){
        var cookie_username="username="+escape(document.getElementById("demo_input1").value)+";"+
                        "expire="+((new Date()).getTime()+600*1000);
        var cookie_password="password="+escape(document.getElementById("demo_input2").value)+";"+
                        "expire="+((new Date()).getTime()+600*1000);
        document.cookie=cookie_username;
        document.cookie=cookie_password;
    }
    document.getElementById("demo_button2").onclick=function(){
        var cookieObj=getCookieObj();
        alert(
            "用户名："+unescape(cookieObj.username)+"\n"+
            "密码："+unescape(cookieObj.password)
        );
    }
</script>

实例演示：

用户名：		密码：