属于某个特定用户的信息应该存在该用户的机器上,无论是登录信息、偏好设定或其他数据,这是一个很重要的用户体验，它避免了用户重复多次的简单操作。
一、Cookie
cookie 是原来的网景公司创造的。一份题为“Persistent Client State: HTTP Cookes”（持久客户端状态： HTTP Cookies ） 的标准中对cookie 机制进行了阐述。
cookie标准要求服务器对任意HTTP 请求发送Set-Cookie HTTP 头作为响应的一部分，其中包含会话信息
过程：
1.设置cookie，发送至服务器端；
2.服务器对该请求发送带有Set-Cookie 的HTTP响应给浏览器；
3.浏览器会存储这样的会话信息，并在这之后，通过为每个请求添加Cookie HTTP 头将信息发送回服务器
cookie的限制
- 域限制：浏览器会存储这样的会话信息，并在这之后，通过为每个请求添加Cookie HTTP 头将信息发送回服务器
- 大小限制：大多数浏览器都有大约4096B（加减1）的长度限制。为了最佳的浏览器兼容性，最好将整个cookie 长度限制在4095B（含4095）以内
- 个数限制：每个域的cookie 总数是有限的，不过浏览器之间各有不同：
| 浏览器 | 个数 |
|---|---|
| IE7+ | 50 |
| Firefox | 50 |
| Opera | 30 |
| Safari 和Chrome | 没有硬性规定 |
cookie的构成
比如：
Set-Cookie: name=value; expires=Mon, 22-Jan-07 07:10:24 GMT; domain=.wrox.com;secure
name = value[必须参数]; 名值对，不区分大小写，必须是URL 编码domain设定cookie的有效域，所有向该域发送的请求中都会包含这个cookie 信息path指定cookie在有效域中的有效路径，即使请求都是来自同一个域的，不是该键制定的路径，也不会发送cookieexpires表示cookie 何时应该被删除的时间戳（这个值是个GMT 格式的日期），默认情况下，浏览器会话结束时即将所有cookie 删除secure指定后，cookie 只有在使用SSL 连接的时候才发送到服务器
js处理cookie
document.cookie 返回当前页面可用的所有cookie的字符串，一系列由分号隔开的名值对儿。
cookie的操作无非是获取、设置和删除，我们把这三种方法封装在一个var CookieUtil = {}对象中。分别对应其get，set，unset属性。
cookie的name和value都是经过URL 编码的，所以必须使用encodeURIComponent，decodeURIComponent()来编解码。
1.get
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;
}
2.set
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;
}
3.unset
unset: function (name, path, domain, secure){
this.set(name, "", new Date(0), path, domain, secure);
}
子cookie
子cookie可以绕开浏览器的单域名下的cookie 数限制。子cookie 是存放在单个cookie 中的更小段的数据。也就是使用cookie 值来存储多个名称值对，如：name=name1=value1&name2=value2&name3=value3&name4=value4&name5=value5
所有的cookie 都会由浏览器作为请求头发送，所以在cookie 中存储大量信息会影响到特定域的请求性能。cookie 信息越大，完成对服务器请求的时间也就越长。尽管浏览器对cookie 进行了大小限制，不过最好还是尽可能在cookie 中少存储信息，以避免影响性能
二、IE用户数据
在IE5.0 中，微软通过一个自定义行为引入了持久化用户数据的概念。用户数据允许每个文档最多
128KB 数据，每个域名最多1MB 数据。
使用：
- 使用CSS 在某个元素上指定userData 行为：
<div style="behavior:url(#default#userData)" id="dataStore"></div>
- 使用setAttribute()方法在上面保存数据
dataStore.setAttribute("name", "Nicholas");
- 调用save()方法保存数据，参数为数据空间名字，数据空间名字可以完全任意，仅用于区分不同的数据集
dataStore.save("BookInfo");
- 使用load()方法来获取数据，参数为数据空间名字
dataStore.load("BookInfo");
- 使用removeAttribute()删除数据，并使用save()保存修改
dataStore.removeAttribute("name");
dataStore.save("BookInfo");
限制
- 同cookie，需要同域名，同路径，并使用与进行存储的脚本同样的协议；
- 无法将用户数据访问限制扩展到更多的客户
用户数据默认是可以跨越会话持久存在的，不会过期；数据需要通过removeAttribute()方法专门进行删除以释放空间。
三、web存储机制——Web Storage
Web Storage 的目的是克服由cookie 带来的一些限制，提供一种存储大量可以跨会话的在cookie 之外的存储会话数据的途径。
Storage对象（以windows 对象属性的形式存在）
-
sessionStorage对象
存储特定于某个会话的数据，该数据只保持到浏览器关闭 -
globalStorage对象
这个对象可以跨越会话存储数据，但有特定的访问限制。要使用globalStorage，首先要指定哪些域可以访问该数据。可以通过方括号标记使用属性来实现。如果不使用removeItem() 或者delete 删除该对象， 或者用户未清除浏览器缓存， 存储在globalStorage 属性中的数据会一直保留在磁盘上。这让globalStorage 非常适合在客户端存储文档或者长期保存用户偏好设置。 -
localStorage对象
该对象在修订过的HTML 5 规范中作为持久保存客户端数据的方案取代了globalStorage。与globalStorage 不同，不能给localStorage 指定任何访问规则；规则事先就设定好了。要访问同一个localStorage 对象，页面必须来自同一个域名（子域名无效），使用同一种协议，在同一个端口上。这相当于globalStorage[location.host]。
同globalStorage对象一样，localStorage对象数据保留到通过JavaScript 删除或者是用户清除浏览器缓存。
浏览器支持：
IE8+、Firefox 3.5+、Chrome 4+和Opera 10.5+
Storage对象方法：
- clear()： 删除所有值；Firefox 中没有实现 。
- getItem(name)：根据指定的名字name 获取对应的值。
- key(index)：获得index 位置处的值的名字。
- removeItem(name)：删除由name 指定的名值对儿。
- setItem(name, value)：为指定的name 设置一个对应的值。
Storage 类型只能存储字符串。非字符串的数据在存储之前会被转换成字符串。
Storage对象事件
对Storage 对象进行任何修改，都会在文档上触发storage 事件。这个事件的event 对象有以下属性：
- domain：发生变化的存储空间的域名。
- key：设置或者删除的键名。
- newValue：如果是设置值，则是新值；如果是删除键，则是null。
- oldValue：键被更改之前的值。
数据操作
存储数据：
//使用属性存储数据
sessionStorage/globalStorage["www.wrox.com"]/localStorage.name = "brand";
//使用方法存储数据
sessionStorage/globalStorage["www.wrox.com"]/localStorage.setItem("name","brand");
读取数据：
//使用属性存储数据
var name = sessionStorage/globalStorage["www.wrox.com"]/localStorage.name;
//使用方法存储数据
var name = sessionStorage/globalStorage["www.wrox.com"]/localStorage.getItem(("name","brand");
删除数据：
sessionStorage/globalStorage["www.wrox.com"]/localStorage.removeItem("name")
限制
每个来源都有固定大小的空间用于保存自己的数据，一般限制在2.5M—5M左右。
参考书籍：《javascript高级程序设计》
我的博客:http://bigdots.github.io、http://www.cnblogs.com/yzg1/
如果觉得本文不错的话，帮忙点击下面的推荐哦,谢谢！