在JavaScript中读写cookie代码-js教程-PHP中文网

在JavaScript中读写cookie代码

高洛峰

发布： 2016-11-28 13:27:15

原创

1225 人浏览过

在JavaScript中处理cookie有些复杂，因为其众所周知的蹩脚的接口，即BOM的doucment.cookie属性。这个属性的独特之处在于它会因为使用它的方式不同而表现出不同的行为。当用来获取属性值时，document.cookie返回当前页面可用的(根据cookie的域、路径、失效时间和安全设置)所有cookie的字符串，一系列分号隔开的名-值对，如下例所示：

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

1 　　所有名字和值都是经过URL编码的，所以必须使用decodeURIComponent()来解码。

　　当用于设置的时候，document.cookie属性可以设置为一个新的cookie字符串。这个cookie字符串会被解释并添加到现有的 cookie集合中。设置document.cookie并不会覆盖cookie除非设置的cookie的名称已经存在。设置cookie的格式如下，和 set-Cookie头中使用的一样的格式：

name=value; expires=expiration_time; path=domian_path; domian=domain_nam

　　这些参数中，只有cookie的名字和值是必须的。下面是一个简单的例子：

document.cookie = "name=Nicholas";

　　这段代码创建了一个叫name的cookie，值为Nicholas。当客户端每次向服务器端发送请求的时候，都会发送这个cookie；当浏览器关闭的时候，它就会被删除。虽然这段代码没问题，但因为这里正好名称和值都无需进行编码，所以最好每次设置cookie时都像下面这个例子中一样使用

encodeURIComponent();

　　document.cookie = encodeURIComponent("name") + "=" + encodeURIComponent("Nicholas");

　　要给被创建的cookie指定额外的信息，只要将参数追加到该字符串，和Set-Cookie头中的格式一样，如下：

document.cookie = encodeURIComponent("name") + "=" + encodeURIComponent("Nicholas") + "; domain=.wrox.com; path=/";

由于JavaScript中读写cookie不是非常直观，我们常写一些函数来简化cookie的功能。基本的cookie操作有三种：读取、写入和删除。它们在CookieUtil对象中如下表示：

var CookieUtil = {
    get: function (name) {
        var cookieName = encodeURIComponent(name) + "=",
            cookieStart = document.cookie.indexOf(cookieName),
            cookieValue = null;
        if (cookieStart > -1) {
            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 += "; domain=" + domain;
        }
        if (secure) {
            cookieText += "; secure";
        }
        document.cookie = cookieText;
    },
    unset: function (name, path, domain, secure) {
        this.set(name, "", new Date(0), path, domain, secure);
    }
};

登录后复制

CookieUtil.get()方法根据cookie的名字获取相应的值。他是通过在document.cookie字符串中查找cookie名加上等于号的位置。如果找到了，那么使用indexOf()查找该位置之后的第一个分号（表示了该cookie的结束位置）。如果没有找到分号，则表示该 cookie是字符串中的最后一个，则域下的字符串都是cookie的值。该值使用decodeURIComponent()进行解码并最后返回。如果没有发现Cookie，则返回null。
CookieUtil.set()方法在页面上设置了一个cookie，接受几个参数：cookie的名称，cookie的值，可选的用于指定 cookie何时应该被删除的Date对象，cookie的可选的URL路径，可选的域，以及可选的表示是否要添加secure标志的Boolean值。参数是按照它们使用频率的多少来排列的，只有头两个是必须的。在这个方法中，名称和值都使用encodeURIComponent()进行了URL编码，并检查其它选项。如果expires参数是Date对象，那么会使用Date对象的toGMTString()方法正确格式化Date对象，并添加到 expires选项上。方法的其它部分就是构造cookie字符串并将其设置到document.cookie中。
没有删除现存cookie的直接方法。所以，需要使用相同的路径、域和安全选项再次设置cookie，并将失效时间设置为过去的时间。 CookieUtil.unset()方法可以处理这种事情。它接受4个参数：要删除的cookie的名称，可选的路径参数，可选的域参数以及可选的安全参数。这些参数加上空字符串并设置失效时间为1970年1月1日（初始化为0ms的Date对象的值），传给CookieUtil.set()。这样就能确保cookie被删除。
这些方法可以如下使用：

//设置cookie
CookieUtil.set("name", "Nicholas");
CookieUtil.set("book", "Professional <a href="http://www.php1.cn/">JavaScript</a>");
//读值
alert(CookieUtil.get("name"));
alert(CookieUtil.get("book"));
//删除cookie
CookieUtil.unset("name");
CookieUtil.unset("book")
//设置1个cookie，包括它的路径、域、截止日期
CookieUtil.set("name", "Nicholas", "/books/projs/", "www.wrox.com", new Date("January 1, 2010"));
//删除同一cookie
CookieUtil.unset("name", "/books/projs/", "www.wrox.com");
//设置1个<a href="http://www.php1.cn/category/23.html">安全</a>cookie
CookieUtil.set("name", "Nicholas", null, null, null, true);

登录后复制

这些方法通过处理解析、构造cookie字符串的任务令在客户端利用cookie存储数据更加简单