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。