Cookie

在支持 navigator.cookieEnabled 的浏览器中可以通过该属性判断浏览器是否支持 Cookie。

Cookie 有效期和作用域

Cookie 默认的有效期很短暂，只能持续在 Web 浏览器的会话期间，一旦用户关闭浏览器，Cookie 保存的数据就消失了。Cookie 的有效期可以通过 max-age 来设置（单位：秒）；作用域可以通过文档源（domain）和文档路径（path）来设置；可见性可以通过 path 来设置。Cookie还有一个 secure 属性，标记为 true 时表示通过 HTTPS 等安全协议连接时才传递它。

保存 Cookie

Cookie 值中不允许出现分号、逗号和空白符，所以通过 encodeURIComponent 对其进行编码：

document.cookie = "version=" + encodeURIComponent(document.lastModified);

相应地，读取的时候需要采用 decodeURIComponent 函数解码。

要设置 Cookie 的有效期和作用域，可以这么设置：

document.cookie += "; max-age=" + 7*60*60*24;
document.cookie += "; path=/";
document.cookie += "; domain=.example.com";
document.cookie += "; secure=false";

要删除一个 Cookie，将 max-age 设置为 0 即可。

读取 Cookie

// 解析 document.cookie 属性值
function getcookie() {
    var cookie = {};
    var all = document.cookie;
    if (all === "")
        return cookie;
    var list = all.split("; ");
    for (var i = 0; i < list.length; i++) {
        var item = list[i];
        var p = item.indexOf("=");
        var name = item.substring(0, p);
        var value = item.substring(p + 1);
        value = decodeURIComponent(value);
        cookie[name] = value;
    }
    return cookie;
}

Cookie的局限性

Cookie 的设计初衷是用来给服务器端存储少量数据的，该数据会在每次请求时传递到服务器端。RFC 2965 鼓励浏览器限制 Cookie 总数和大小，比如浏览器支持 Cookie 总数不能超过 300 个，单个站点 Cookie 总数不能超过 20 个，单个 Cookie 保存的数据不能超过 4 KB。这就限制了 Cookie 保存数据的数量和大小。

Cookie相关的存储

// 实现基于 Cookie 的存储 API
function cookieStorage(maxage, path) {
    var cookie = (function () {
        var cookies = {};
        var all = document.cookie;
        if (all === "")
            return cookies;
        var list = all.split("; ");
        for (var i = 0; i < list.length; i++) {
            var item = list[i];
            var p = item.indexOf("=");
            var name = item.substring(0, p);
            var value = item.substring(p + 1);
            value = decodeURIComponent(value);
            cookies[name] = value;
        }
        return cookies;
    }());
    
    var keys = [];
    for (var key in cookie)
        keys.push(key);
    
    this.length = keys.length;
    
    this.key = function (n) {
        if (n < 0 || n >= keys.length)
            return null;
        return keys[n];
    };
    
    this.getItem = function (name) {
        return cookie[name] || null;
    };
    
    this.setItem = function (key, value) {
        if (!(key in cookie)) {
            keys.push(key);
            this.length++;
        }
    
        cookie[key] = value;
    
        var setcookie = key + "=" + encodeURIComponent(value);
    
        if (maxage)
            setcookie += "; max-age=" + maxage;
        if (path)
            setcookie += "; path=" + path;
    
        document.cookie = setcookie;
    };
    
    this.removeItem = function (key) {
        if (!(key in cookie)) {
            return;
        }
    
        delete cookie[key];
    
        for (var i = 0; i < keys.length; i++) {
            if (keys[i] === key) {
                keys.splice(i, 1);   // 将其从keys中移除
                break;
            }
        }
        this.length--;
    
        document.cookie = key + "=; max-age=0";
    };
    
    this.clear = function () {
        for (var i = 0; i < keys.length; i++) {
            document.cookie = keys[i] + "=; max-age=0";
        }
        cookie = {};
        keys = [];
        this.length = 0;
    };
}

调用示例：