cookie

用于客户端存储会话信息的，一般由服务器返回的响应头中的Set-Cookie字段设置，然后每个请求为每个请求头添加Cookie的字段回送给该服务器。

限制（数量和大小）

权限：cookie只能被特定的域所接收，默认为设置cookie的域。

数量：每个域名下的cookie数量是有限的，一般20-50个

大小：不同浏览器不一样，一般4KB以内

超出数量，随机删除、最少使用删除

超出大小，该cookie不会被设置成功

组成

以下组成部分由服务器发送给浏览器

浏览器发送给服务器的只包括name=value

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; path=/; secure

name为名称，value为值，都要被URL编码
expires为失效时间，保存cookie何时应该被删除的时间戳，默认关闭浏览器失效，若设置过去的时间则立即删除
domain为该cookie有效的域
path为路径，对指定域下的那个路径才发送cookie
secure为安全标志，https请求才发送cookie，为一不用键值对形式

JavaScript中的cookie

编码解码

编码encodeURIComponent("字符串")

解码decodeURIComponent(xxx)

获取

document.cookie返回当前页面可用的所有cookie

形式如下，一系列用分号隔开的名-值对，要使用的话需解码

name1=value1;name2=value2;name3=value3

添加

document.cookie= encodeURIComponent("name") + "=" + encodeURIComponent("value"); domain=xxx.com

格式基本和Set-Cookie一样，只不过name=value要编码

不会覆盖原有cookie，只会添加

删除

用同样的路径、域和安全选项再次设置cookie，将失效时间设为过去的时间

子cookie

每个域下有数量限制，为了增加cookie的数量

子cookie是存放在单个cookie中更小的数据

在cookie的值中存储多个名称-值对

name=name1=value1&name2=value2&name3=value3

使用的时候分割开就好

DOM存储机制

Storage类型

Storage只能存储字符串，非字符串在存储时会被转换成字符串（手动转JSON.stringify()）

大小限制大概在5M/10M

实例具有的方法：

clear()
删除所有值

key(index)
返回指定数字位置的名字name

getItem(name)
返回指定名称对应的值

setItem(name,value)
添加名-值对

removeItem(name)
删除指定名称的名-值对

实例具有的属性：

.length
.xxx
// 可用.属性或[]的方式取值

sessionStorage对象

生命周期为当前窗口和标签页，关闭窗口或标签页就失效，同一浏览器下不同标签页间不能共有。

// 存储数据
sessionStorage.setItem("name","value")
sessionStorage.name = "value"

// 读取数据
sessionStorage.getItem("name")
sessionStorage.name

可用length属性和key()方法迭代sessionStorage中的值
或者for-in来迭代

// 删除数据
sessionStorage.removeItem("name")
delete sessionStorage.name // 有兼容性问题

// 删除所有数据
sessionStorage.clear()

localStorage对象

生命周期是永久，只能被JS设置删除或用户清除浏览器缓存才失效，同一浏览器下的不同标签页可以公用，前提是同一域名和端口和协议

sessionStorage.setItem("name", "value");
sessionStorage.getItem("name");
sessionStorage.removeItem("name");
sessionStorage.clear();

安全性设置

Storage对象中存储的每个项目都是StorageItem的实例，其有一个属性secure，其表示是否必须通过HTTPS才可访问当前的存储内容，只有在HTTPS访问的页面运行时才可以设置该属性secure

// 允许在非安全页面访问(HTTP)
localStorage.name.secure = false

globalStorage对象（被淘汰）

在HTML5中，目前已被localStorage所替代

// 保存数据
globalStorage["wrox.com"].name = "value"

// 获取数据
globalStorage["wrox.com"].name

// 删除数据
globalStorage["wrox.com"].removeItem("name")

与localStorage的联系

localStorage 相当于 globalStorage[location.host]

三者异同

客户端存储（cookie/storage）