随着Web应用程序出现，产生了能够直接在C端存储用户信息能力的要求。想法也合乎逻辑，属于某个特定用户的信息应该存在该用户的机器上。无论是登陆信息、偏好设定或其他数据。
这个问题的第一个方案是以cookie的形式出现的，cookie原来是网景公司创造的。

使用 Web Storage API

Cookie

HTTP Cookie，通常直接叫做cookie，最初是在用户端用于存储会话信息的。该标准要求服务器对任意HTTP请求发送Set-Cookie HTTP头作为响应的一部分。其中包含会话信息。例如，这种服务器响应的头可能如下：

    HTTP/1.1 200 OK
    Content-type: text/html
    Set-Cookie: name=value
    Other-header: other-header-value

这个HTTP响应设置以name为名称、以value为值的一个cookie，键值在传送时都必须是URL编码的。浏览器会存储这样的会话信息，并在这之后，通过为每个请求添加Cookie HTTP头将信息发送服务器，如下：

    GET /index.html HTTP/1.1
    Cookie: name=value
    Other-header: other-header-value

发送回服务器的额外信息可以用于验证客户来自于发送的哪个请求。

Cookie的限制
cookie在性质上时绑定在特定的域名下的。当设定了一个cookie后，再给创建它的域名发送请求时，都会包含这个cookie。这个限制确保了存储在cookie中的信息只能让批准的接受者访问，而无法被其他域访问。
关键词：绑定在特定的域下

由于cookie时存在客户端计算机上的，还加入了一些限制确保cookie不会被恶意使用，同时不会占据太多磁盘空间。每个域的cookie总数是有限的。

• IE6以及更低版本限制每个域名20个cookie。
• IE7每个域50个。
• Firefox限制每个域50个。
• Opera限制每个域最多30个。
• Safari和Chrome对于每个域的cookie数量没有限制（？？？）

当超过上限后继续设置cookie，浏览器就会清除以前设置的cookie。
浏览器对cookie的大小也有限制，大多数浏览器都有大约4096B（+-1）的长度限制。为了最佳的浏览器兼容，最好将整个cookie长度限制在4095B以内。
如果尝试创建超过最大尺寸限制的cookie，那么该cookie会悄无声息的地丢掉。

cookie的构成

• 名称
  一个唯一确定cookie的名称。cookie名称是不区分大小写的，所以myCookie和MyCookie被认为是同一个cookie。然而，实践中最好区分大小写。
• 值
  存储在cookie中的字符串值，值必须被URL编码。
• 域
  cookie对于哪个域是有效的，所有向该域发送的请求中都会包含这个cookie信息。这个值可以包含子域，也可以不包含，如果不做规定，那个这个域会被认作来自设置cookie的那个域。
• 路径
  对于指定域中的那个路径，应该向服务器发送cookie。
• 失效时间
  表示cookie何时应该被删除的时间戳（也就是何时应该停止向服务器发送这个cookie）。默认情况下浏览器会话结束时即将所有cookie删除；不过也可以自己设置删除时间。这个值是个GMT格式日期。因此cookie可在浏览器关闭后依然存在用户机器上。如果你设置的失效日期是个以前的时间，则cookie会被立刻删除。
• 安全标志
  制定后，cookie只有在使用SSL连接的时候才发送到服务器。例如，cookie信息只能发送给https://www.wrox.com，而http://www.wrox.com的请求则不能发送cookie。
  每一段信息都作为Set-Cookie头的一部分，使用分号加空格分隔每一段。

HTTP/1.1 200 OK
Content-type: text/html
Set-Cookie: name=value; expires=Mon, 22-Jan-07 07:10:24 GMT; domain=.wrox.com
Other-header: other-header-value

头信息指定了一个名为name的cookie，它会在格林威治时间2007年1月22日7:10:24失效，同时对于www.wrox.com和wrox.com的任何子域（如p2p.wrox.com）都有效。
secure标志是cookie中唯一一个非键值对的部分，直接包含一个secure单词。如下：

HTTP/1.1 200 OK
Content-type: text/html
Set-Cookie: name=value; domain=.wrox.com; path=/; secure
Other-header: other-header-value

这里设置了secure标志，这个cookie只能通过SSL连接才能传输。

尤其要注意，域、路径、失效时间和secure标志都是服务器给浏览器的指示，已指定何时应该发送cookoie。这些参数并不会作为发送服务器的cookie信息的一部分，只有键值对才会被发送。

JS中的cookie
在JS中处理cookie有些复杂，因为其中所周知的蹩脚的接口，即BOM的document.coookie属性。这个属性的独特指出在于 它会因为使用它的方式不同表现出不同的行为。

当用来获取属性值时，document.cookie返回当前页面可用的所有cookie的字符串，一系列由分号隔开的键值对。

name1=value1;name2=value2;name3=value3

所有名字和值都是URL编码，所以必须使用docodeURLComponent()解码。

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

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

这些参数中，只有cookie的名字和值是必需的。

document.cookie = "name=Nicholas";

这段代码创建了一个名为name的cookie，值为Nicholas。当客户端每次向服务器发送请求的时候，都会发送这个cookie；当浏览器关闭的时候，他就会被删除。

由于JS中读写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.coookie.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()查找该位置后的第一个分号（表示该cookoie结束位置）。如果没有分号，表示该cookie时字符串最后一个，则余下的字符串都是cookie的值。该值使用decodeURLComponent()进行解码并最后返回。如果没有发现cookie，则返回null。

......
可以这样使用上述方法：

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

        // 读取cookie值
        console.log(CookieUtil.get("name"));    // "Nicholas"
        console.log(CookieUtil.get("book"));    // "Professional JavaScript"

        // delete cookie
        CookieUtil.unset("name");
        CookieUtil.unset("book");

        // 设置cookie,包括它的路径、域、失效日期
        CookieUtil.set("name","Nicholas","/books/projs/","www.wrox.com",new Date("January 1, 2010"));

        // 删除刚刚设置的cookie
        CookieUtil.unset("name","/books/projs/","www.wrox.com");

        // 设置安全的cookie
        CookieUtil.set("name","Nicholas",null,null,null,true);

Web Storage

Web Storage最早是在WHAT-WG的Web应用1.0规范描述的。目的是客服由cookie带来的一些限制，当数据需要被严格控制在客户端时，无须持续的将数据发回服务器。

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

最初的Web Storage规范包含了两种对象定义：sesionStorage和globalStorage。

Stroage类型
Storage类型提供最大的存储空间（因浏览器而异）来存储键值对。

• clear()
  删除所有值；Firefox中没有实现。

• getItem(name)
  根据指定的名字name获取对应的值。

• key(index)
  获取index位置处的值的名字

• removeItem(name)
  删除由name指定的键值对。

• setItem(name,value)
  为指定的name设置一个对应的值。

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

sessionStorage对象
sessionStorage对象存储特定于某个会话的数据，也就是该数据只保持到浏览器关闭。这个对象就像cookie，也会在浏览器关闭后消失。sessionStorage中的数据可以跨越页面刷新而存在，同时浏览器支持，浏览器崩溃后重启依然可用。
因为sessionStorage中的数据绑定于某个服务器会话，当文件在本地运行时不可用。数据只能由最初给对象存储数据的页面访问到。

//使用方法存储数据
sessionStorage.setItem("name", "Nicholas");

// 使用属性存储数据
sessionStorage.book = "Professional JavaScript";

sessionStorage中有数据时，可以使用getItem()或者通过直接访问属性名来获取数据。

// 使用方法读取数据
var name = sessionStorage.getItem("name");

// 使用属性读取数据
var book = sessionStorage.book;

还可以通过结合length属性和key()方法来迭代值。

        for (var i = 0, len = sessionStorage.length; i < len; i++) {
            var key = sessionStorage.key(i);
            var value = sessionStorage.getItem(key);
            console.log(key + "=" + value);
        }

sessionStorage对象应该主要用于仅针对会话的小段数据的存储。如果需要跨越会话存储数据，那么globalStorage或者localStorage更合适。

localStorage对象

要访问同一个localStorage对象，页面必须来自用一个域名，使用同一种协议，在同一个端口上。
由于localStorage时Storage的实例，所以可以像使用sessionStorage一样使用它。

localStorage.setItem("name","Nicholas");
localStorage.book = "Professional JavaScript";
var name localStorage.getItem("name");
var book = localStorage.book;

存储在localStorage中的数据和存储在globalStorage中的数据一样，都遵循同样规则，数据保留到通过JS删除或者用户清除浏览器缓存。

storage事件

对Storage对象做任何修改，都会在文档上触发storage事件，当通过属性或setItem()方法保存数据，使用delete操作符或removeItem()删除数据，调用clear()方法时，都会发生该事件。这个事件event对象有以下属性。

• domain：发生变化的存储空间的域名
• key：设置或者删除的键名
• newValue：如果设置新值，则是新值；如果删除，则是null。
• oldValue：键被更改之前的值。

限制
与其他客户端数据存储方案类似，web storage同样也有限制。大多数桌面浏览器会设置每个来源5MB的限制，chrome和safari对每个来源限制2.5MB。而IOS版safari和Android版webkit的限制也是2.5MB。
对sessionStorage的限制也是因浏览器而异。有的浏览器对sessionStorage的大小没有限制。有关限制参考

参考：

详说 Cookie, LocalStorage 与 SessionStorage

cookie、localStorage和sessionStorage 三者之间的区别以及存储、获取、删除等使用方式