客户端存储

Cookie

HTTP Cookie，最初在客户端用于存储会话信息，该标准要求服务器对任意HTTP请求发送Set-Cookie HTTP头作为相应的一部分，其中包含会话信息

浏览器会存储这样的会话信息并为每个请求加上Cookie发送回服务器，服务器可以验证来自哪个请求

限制

cookie性质上是绑定在特定的域名下的，每个域的cookie总数是有限的，不同浏览器之间会有差异

当超过单个域名限制之后再设置cookie，浏览器就会清除以前设置的cookie

cookie的尺寸也有限制，大多数浏览器都有约(4096字节加减1的长度限制)，超过限制会被丢掉

cookie的成分

• 名称——唯一确定cooke，大小写不敏感，实践中最好将其看作敏感的，因为有些服务器会这样处理cookie
• 值——存储在cookie中的字符串值，值必须被URL编码
• 域——cookie对于哪个域是有效的。所有向该域发送的请求中都会包含这个cookie信息，对于子域也有效
• 路径——对于指定域中的那个路径，应该向服务器发送cookie，例如：www.wrox.com/books才能访问，那么哪怕同域不同路径也不会发送cookie信息
• 失效时间——表示cookie何时应该被删除的时间戳
• 安全标志——指定后，cookie只有在使用SSL连接的时候才发送到服务器

JS中的cookie

通过document.cookie来进行设置，但常常要用decodeURIComponent()来解码

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);
    }

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

console.log(CookieUtil.get("name"));
console.log(CookieUtil.get("book"));
//删除cookie
CookieUtil.unset("name");
CookieUtil.unset("book");

子cookie

绕开浏览器单域名下的cookie数限制。子cookie是存放在单个cookie中的更小段的数据

DOM存储机制

目的是克服由cookie带来的一些限制，当数据需要被严格控制在客户端上时，无需持续地将数据发回服务器

DOM存储的两个主要目标:

• 提供一种在cookie之外存储会话数据的机制
• 提供一种存储大量可以跨越会话存在的数据的机制

存储类型

Storage类型用来存储最大限的名-值对。Storage的实例和其他对象行为一样，有下列额外的方法

• clear()——删除所有值
• getItem()——根据指定的名字name获取对应的值
• key(index)——在指定的数字位置获取该位置的名字
• removeItem(name)——删除由名字name指定的名——值对
• setItem(name,val)——为指定名字name设置一个对应的值

注意：Storage类型只能存储字符串，非字符串的数据在存储之前会被转换成字符串

sessionStorage对象

存储特定于某个会话的数据，数据只保持到浏览器关闭

因为sessionStorage对象绑定于某个服务器会话，所以当文件在本地运行的时候不可用，存储的数据只能由最初给对象存储数据的页面访问，对多页面应用有限制

localStorage对象

为了能访问到同一个localStorage对象，页面必须来自同一个域名(子域名无效)，使用同一种协议，在同一个端口上。

有了以上这些选择，可以在客户端上使用JS存储大量数据了，不过需要小心，不要存储敏感数据，因为数据缓存并不加密