用JavaScript操作cookie

本文介绍了如何使用JavaScript操作Cookie，包括创建、读取、修改和删除Cookie的方法。文章提供了详细的示例代码，展示了如何处理单一Cookie及子Cookie。

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

一：用js操作cookie须知？
JavaScript中操作cookie用的是BOM里面的document.cookie属性。根据cookie的(域、路径、失效时间和安全设置)，所有cookie的字符串，一系列由分隔号隔开的明值对如下所示：

name1=value1;name2=value2;name3=value3;

以上所有的名字和值都是经过URL编码的，所以必须使用decodeURIComponent()来解码。当设置cookie的值得时候，document.cookie属性可以设置为一个新的字符串，这个cookie字符串会被解释并添加到现有的cookie字符串集合中。除非设置的cookie和已存在的cookie同名，否则不仅不会覆盖原来的cookie，而且还会增加原来的cookie。
二：用js来任性操作cookie？
1.图示说明：下图是网址:http://m.12nav.com在google浏览器控制台Resource下的cookie图：
这里写图片描述
在响应头的cookie图：

设置cookie的格式如下，和Set-Cookie头中使用的格式一样：

name=value; expires=expires_time; path=domain_path; domain=domain_name; secure

2.实例说明：以上参数中只有name和value是必须的。下面是一个简单的例子：

document.cookie = 'name=bangbang';

以上的cookie，当客户端每次向服务器发送请求的时候，都会发送这个cookie；当浏览器关闭的时候，他就会被删除。虽然这段代码没问题，因为这里的名称和值都不需要编码。但是通常我们每次设置cookie的时候都需要编码：

document.cookie = encodeURLComponent('name') + '=' + encodeURLComponent('bangbang');

如果需要穿件额外的信息，只需要把后面的参数追加到上面的字符串上就可以了，和Set-Cookie的格式一样：

document.cookie = encodeURLComponent('name') + '=' +encodeURLComponent('bangbang') + '; domain=.baidu.com; path=/';

通常JavaScript中需要使用函数来对cookie进行：读取，写入和删除。我把它们封装在CookieUtil中(Js高程631页)：

    var CookieUtil = {
        get: function (name) {
            var cookieName = encodeURIComponent(name) + '=',
                cookieStart = document.cookie.indexOf(cookieName),
                cookieValue = null;
            if (cookieStart > -1) { //如果以前的cookie里面存在又加入的name
                var cookieEnd = document.cookie.indexOf(';', cookieStart);
                if (cookieEnd == -1) {
                    cookieEnd = document.cookie.length;
                }
                cookieValue = decodeURIComponent(document.cookie.substring(cookieStart + cookieName.length, cookieEnd));
            }
            return cookieValue;
        },
        set: function (name, value, expires, path, domain, secure) {
            var cookieText = encodeURIComponent(name) + '=' + encodeURIComponent(value);
            if (expires instanceof Date) {
                cookieText += '; expires=' + expires.toGMTString();
            }
            if (path) {
                cookieText += ';path=' + path;
            }
            if (domain) {
                cookieText += '; secure';
            }
            document.cookie = cookieText;
        },
        unset: function (name, path, domain, secure) {
            this.set(name, '', new Date(0), path, domain, secure);
        }
    }

但是，上面的方法只能操作单个cookie不能操作多个cookie，如果需要增删改查子cookie
形如：document.cookie = 'name=name1=bangbang&name2=yanniu&name3=qiqi&name4=linlin&name5=liuge'; 的cookie就是，里面的name1和name2都是子cookie。那么怎么操作他们呢；请跟着我写下面的代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <button id="myDiv">点击俺们</button>
</body>
<script>
    var SubCookieUtil = {
        get : function(name,subName){
            var subCookies = this.getAll(name);
            if(subCookies){
                return subCookies;
            }else{
                return null;
            }
        },
        getAll : function(name){
            var cookieName = encodeURIComponent(name) + '=',
            cookieStart = document.cookie.indexOf(cookieName),
            cookieValue = null,
            cookieEnd,
            subCookies,
            i,
            parts,
            result = {};
            if(cookieStart > -1){
                cookieEnd = document.cookie.indexOf(';',cookieStart);
                if(cookieEnd == -1){
                    cookieEnd = document.cookie.length;
                }
                cookieValue = document.cookie.substring(cookieStart + cookieName.length,cookieEnd);
                if(cookieValue.length > 0){
                    subCookies = cookieValue.split('&');
                    for(var i=0; i<subCookies.length; i++){
                        parts = subCookies[i].split('=');
                        result[decodeURIComponent(parts[0])] = decodeURIComponent(parts[1]);
                    }
                    return result;
                }
            }
            return null;
        },
        set : function(name,subName,value,expires,path,domain,secure){
            var subcookies = this.getAll(name) || {};
            subcookies[subName] = value;
            this.setAll(name,subcookies,expires,path,domain,secure);
        },
        setAll : function(name,subcookies,expires,path,domain,secure){
            var cookieText = encodeURIComponent(name) + '=',
            subcookieParts = new Array(),
            subName;
            for(subName in subcookies){
                if(subName.length > 0 && subcookies.hasOwnProperty(subName)){
                    subcookieParts.push(encodeURIComponent(subName) + '=' + encodeURIComponent(subcookies[subName]));
                }
            }
            if(subcookieParts.length > 0){
                cookieText += subcookieParts.join('&');
                if(expires instanceof Date){
                    cookieText += '; expires=' + expires.toGMTString();
                }
                if(path){
                    cookieText += '; path=' + path;
                }
                if(domain){
                    cookieText += '; domain=' + domain;
                }
                if(secure){
                    cookieText += '; secure=' + secure;
                }
            }else{
                cookieText += ';expires=' + (new Date(0)).toGMTString();
            }
            document.cookie = cookieText;
        },
        unset : function(name,subName,path,domain,secure){
            var subcookies = this.getAll(name);
            if(subcookies){
                delete subcookies[subName];
                this.setAll(name,subcookies,null,path,domain,secure);
            }
        },
        unsetAll : function(name,path,domain,secure){
            this.setAll(name,null,new Date(0),path,domain,secure);
        }
    }
    document.cookie = 'name=name1=bangbang&name2=yanniu&name3=qiqi&name4=linlin&name5=liuge';
    console.log(document.cookie);
    console.log(SubCookieUtil.get('name'));
    var showCookie = document.getElementById('myDiv');
    myDiv.addEventListener('click',function(){
        SubCookieUtil.setAll('name',{name1:'111',name2:'222'},new Date('January 1,2017'));
        console.log(SubCookieUtil.get('name'));
        SubCookieUtil.unsetAll('name',name);
        console.log(SubCookieUtil.get('name'));

    },false);
</script>
</html>
//这是在百度下面的控制台输出的百度服务器发送的，保留在我本地的所有的cookie，你们的应该也有：
<!-- BAIDUID=0285D2489EBE6B88A447235ADACD36D9:FG=1;
BDRCVFR[1YH7NbrCiJt]=mk3SLVN4HKm;
BD_CK_SAM=1;
BD_HOME=0;
BD_UPN=15314353
BIDUPSID=5A8D756D27C8BD378FF09CFF34D47EF4;
H_PS_645EC=d9a6bN9PtoilRg8Q4mqPvevWxHG2cZfwetltMrnRWMsy55mzY6QI8%2FBSYHoWVQ;
H_PS_PSSID=21638_1463_21423_21655_17947_21084_17001_21455_21408_21418_21553_21378_21193_21307;
MCITY=-256%3A;
PSINO=1;
PSTM=1472916044;
ispeed_lsm=10; -->