Web存储机制

Web Storage的两个主要目标：
提供一种在cookie之外存储会话数据的途径。
提供一种存储大量可以跨会话存在的数据的机制。

最初的Web Storage规范包含了两种对象的定义：sessionStorage和globalStorage。这两个对象在支持的浏览器中都是以window对象属性的形式存在的。

1.Storage

Storage类型提供最大的存储空间来存储名值对。storage的实例与其他对象类似，有如下方法：

clear():删除所有值;Firefox中没有实现。
getItem(name):根据指定的名字name获取相应的值。
key(index):获得index位置处的值的名字。
removeItem(name):删除由name指定的名值对。
setItem(name,value):为指定的name设置一个对应的值。

还可以使用length属性来判断有多少名值对存放在Storage对象中。

2.sessionStorage

sessionStorage对象存储特定于某个会话的数据，也就是改数据只保持到浏览器关闭。这个对象就像会话cookie，也会在浏览器关闭后消失。

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

由于sessionStorage对象其实是Storage的一个实例，所以可以使用setItem()或者直接设置新的属性来存储数据。

例如：

sessionStorage.setItem('name','nicholas')sessionStorage.book = 'professional javascript'复制代码

sessionStorage中游数据时，可以使用getItem()或者通过直接访问属性名来获取数据。两种方法的例子如下：

var name =  sessionStorage.getItem('name');var book = sessionStorage.book复制代码

还可以通过length属性和key方法来迭代sessionStorage的值。首先通过key方法获取指定位置上的名字，然后在通过getItem()找出对应该名字的值。

也可以用for-in循环来迭代sessionStorage的值。

要删除sessionStorage中的数据，可以使用delete操作符，也可以调用removeItem方法

其中removeItem方法是兼容各种浏览器的。

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

3.globalStorage对象

globalStorage的目的是跨越会话存储数据，但有特定的访问限制。要使用globalStorage，首先要制定哪些域可以访问改数据。可以通过方括号标记使用属性来实现。例如下面例子：

//保存数据globalStorage['wrox.com'].name = 'nicholas'//获取数据var name = globalStorage['wrox.com'].name复制代码

在这里，访问的是针对域名wrox.com的存储空间。globalStorage对象不是Storage的实例，而具体的globalStorage[''wrox.com']才是。这个存储空间对于wrox.com极其所有子域都是可以访问的。也可以指定子域名。

对globalStorage空间的访问，是依据发起请求的页面的域名、协议和端口来限制的。例如，如果使用HTTPS协议在wrox.com中存储了数据，那么通过HTTP访问的wrox.com的页面就不能访问该数据。同样,不同端口间即使协议相同也不能共享数据。类似于ajax请求的同源策略。

如果实现不能确定域名，那么使用location.host作为属性名比较安全。

如果不适用removeItem()或者deletet删除，或者用户未清除浏览器缓存，存储在globalStorage属性中的数据会一直保留在磁盘上， 这让globalStorage非常适合在客户端存储文档或者长期保存用户偏好设置。

4.localStorage对象

localStorage作为持久保存在客户端数据的方案取代了globalStorage。与globalStorage不同，不能给localStorage指定任何访问限制；规则实现就设定好了。要访问同一个localStorage对象，页面必须来自同一个域名（子域名无效），使用同一种协议，在同一个端口上。这相当于globalStorage[location.host]。

由于localStorage是Storage的实例，所以可以像使用sessionStorage一样来使用它。

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

5.storage事件

对Storage对象进项任何修改，都会在文档上触发storage事件。这个事件的event对象有以下属性：

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

无论对sessionStorage、globalStorage还是localStorage进行操作，都会触发storage事件，但不做区分。

6.限制

localStorage大多数桌面浏览器会设置每个来源5mb的限制。

Chrome和Safari对每个来源的限制是2.5MB。而IOS版Safari和Android版WebKit都有限制，也都是2.5MB。IE8+和Opera对sessionStorage的限制是5MB。

转载于:https://juejin.im/post/5be55b436fb9a049f818ca4b