28. Cookie和存储

一、cookie是什么?

cookie,是在客户端用于存储会话信息的。Cookie 是一些数据, 存储于你电脑上的文本文件中。Cookie 以名/值对形式存储,如下所示:

<xmp>
username=John Doe
</xmp>

二、cookie的构成

cookie 由浏览器保存的以下几块信息构成。

参数描述
名称:一个唯一确定 cookie 的名称。cookie 名称是不区分大小写的。cookie 的名称必须是经过 URL 编码的。
值:储存在 cookie 中的字符串值。值必须被 URL 编码。
作用域:cookie 对于哪个域是有效的。
路径对于指定域中的那个路径,应该向服务器发送 cookie。例如,你可以指定 cookie 只有从http://www.wrox.com/books/ 中才能访问,那么 http://www.wrox.com 的页面就不会发送 cookie 信息,即使请求都是来自同一个域的。
失效时间:表示 cookie 何时应该被删除的时间戳,默认情况下,浏览器会话结束时即将所有 cookie 删除;
安全标志:指定后,cookie 只有在使用 SSL 连接的时候才发送到服务器。

浏览器中对于 cookie 的尺寸也有限制。大多数浏览器都有大约 4096B(加减 1)的长度限制。为了最佳的浏览器兼容性,最好将整个 cookie 长度限制在 4095B(含 4095)以内。

可以通过navigator.cookieEnabled来检测浏览器是否支持cookie

<xmp>
    if(navigator.cookieEnabled == true){
        console.log('cookie ok');
    }
</xmp>

三、创建cookie

<xmp>
document.cookie="username=John Doe; expires=Thu, 18 Dec 2013 12:00:00 GMT; path=/";
</xmp>

username=John Doe:名称和对应值
expires:过期时间(以 UTC 或 GMT 时间)。默认情况下,cookie 在浏览器关闭时删除
path:路径,对于指定域中的那个路径

四、修改cookie

<xmp>
document.cookie="username=John Doe; expires=Thu, 18 Dec 2013 12:00:00 GMT; path=/";
</xmp>

旧的 cookie 将被覆盖。

五、读取cookie

<xmp>
var x = document.cookie;
</xmp>

document.cookie 将以字符串的方式返回所有的 cookie,类型格式: cookie1=value; cookie2=value; cookie3=value;

六、删除cookie

删除 cookie 非常简单。您只需要设置 expires 参数为以前的时间即可,如下所示,设置为 Thu, 01 Jan 1970 00:00:00 GMT:

<xmp>
document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT";
</xmp>

注意,当您删除时不必指定 cookie 的值。

七、实例

<xmp>
var Cookie = {
    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);
    }
};

//设置 cookie
Cookie.set("name", "Nicholas");
Cookie.set("book", "Professional JavaScript");

//读取 cookie 的值
alert(Cookie.get("name")); //"Nicholas"
alert(Cookie.get("book")); //"Professional JavaScript"

//删除 cookie
Cookie.unset("name");
Cookie.unset("book");
</xmp>
评论

0 条评论