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。