JavaScript之客户端存储

目前在客户端存储数据的方式主要有三种：cookie、sessionStorage和localStorage。

1. cookie

cookie是在客户端用于存储会话信息的。cookie会在服务器和客户端间进行来回传递，每次发送请求时都会传递它。它要求服务器对任意HTTP请求发送Set-Cookie HTTP头作为相应的一部分，其中包含会话信息。这种服务器响应头可能如下：

HTTP/1.1 200 OK

Content-type: text/html

Set-Cookie: name=value; expires=Mon, 22-Jan-17 07:10:24 GMT; domain=.wrox.com; path=/; secure

Other-header: other-header-value

域、路径、失效时间和secure标志都是服务器给浏览器的指示，以指定何时应该发送cookie，这些参数不会作为发送到服务器的cookie信息的一部分，只有名值对儿才会被发送。

cookie在性质上是绑定在特定的域名下的，因此存储在cookie中的信息只能让批准的受访者访问，而无法被其他域访问。

浏览器中对于cookie的尺寸是由限制的，大多数浏览器都大约有4096B（加减1）的长度限制。因此cookie只能存储少量的数据，存储大量信息会影响到特定域的请求性能。cookie信息越大，完成对服务器请求的事件越长。

在JavaScript中可以通过document.domain来访问cookie，包括读取、写入和删除。例如设置cookie：

document.cookie = encodeURIComponent("name") + "=" + encodeURIComponent("value") +";domain=.wrox.com;path=/";

2. sessionStorage

sessionStorage存储特定域某个会话的数据，该数据只保存到浏览器关闭。存储在sessionStorage中的数据可以跨越页面刷新而存在，同时如果浏览器支持，浏览器奔溃并重启后依然可用（Firefox和Webkit都支持，IE不行）。

可以通过setItem()或者直接设置新的属性来存储数据：

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

//使用属性存储数据
sessionStorage.year = "2017";

getItem()或者通过直接访问属性名来获取数据：

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

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

可以通过结合length属性和key方法以及for-in循环来迭代sessionStorage中的值。

使用removeItem()或者delete操作符可以删除数据：

//使用delete删除一个值-在WebKit中无效
delete sessionStorage.name;

//使用方法删除一个值
sessionStorage.removeItem("year");

sessionStorage主要用于针对会话的小段数据的存储。对sessionStorage的限制在因浏览器而异，有的浏览器对sessionStorage的大小没有限制，但Chrome、Safari、iOS版Safari和Android版WebKit都有限制，都为2.5MB，IE8+和Opera对sessionStorage的限制是5MB。

3. localStorage

localStorage在HTML5规范中最为持久保存客户端数据的方案代替了globalStorage。要访问同一个localStorage对象，页面必须来自同一个域名（子域名无效），使用同一种协议，在同一个端口上。读取和存储数据的方法与sessionStorage一样。localStorage中的数据会保留到通过JavaScript删除或者用户清除浏览器缓存，也就是说除非开发人员或者用户手动清除，否则会一直存在。

对于localStorage而言，大多数桌面浏览器会设置每个来源5MB的限制。Chrome和Safari对每个来源的限制是2.5MB，而iOS版Safari和Android版WebKit的限制也是2.5MB。

对sessionStorage和localStorage进行操作时，都会触发storage事件，该事件的event对象中有以下属性：

domain：发生变化的存储空间的域名

key：设置或删除的键名

newValue：如果是设置值，则是新值；如果是删除值，则是null

oldValue：键被更改之前的值

4. IE用户数据

除了上面三个常用的外，IE还发明了一种叫做用户数据的行为，可以应用到某个元素上。用户数据允许每个文档最多128KB数据，每个域名最多1MB数据。

要使用持久化数据，必须使用CSS在某个元素上指定userData行为：

<div style="behavior:url(#default#userData)" id="dataStore"></div>

一旦应用后，该元素便可以从一个命名数据空间中载入数据，然后可以通过getAttribute()、setAttribute()和removeAttribute()方法获取、设置和删除数据。同时，数据必须明确使用save()方法保存到命名数据空间中，以便能在会话之间持久化数据。通过removeAttribute()方法删除某元素数据后，还必须再次调用save()方法来提交更改。

用户数据默认是可以跨会话持久存在的，同时也不会过期，数据需要通过removeAttribute()方法专门进行删除以释放空间。

5. 总结

相同点：都是保存在浏览器端，且是同源的

不同点：

• cookie会在浏览器端和服务器端来回传递，而sessionStorage和localStorage不会自动把数据传递给服务器，仅在本地保存
• localStorage和sessionStorage的存储空间比cookie大得多
• cookie只在设置的cookie过期时间之前有效；sessionStorage尽在当前浏览器关闭前有效，因此无法做永久存储；localStorage除非手动清除，否则始终有效，即使窗口或浏览器关闭，因此可以用作持久数据。
• localStorage和sessionStorage拥有更多丰富易用的接口