深入理解sessionStorage对象存储和localStorage对象存储

最初的Web Storage规范包含了两种对象的定义:sessionStorage和globalStorage。后者在HTML5中由localStorage替换了,这两个对象在支持的浏览器中都是以windows对象属性的形式存在的,支持这两个属性的浏览器包括IE8+、Firefox 3.5+、Chrome 4+和Opera 10.5+。

Storage类型

Storage类型提供最大的存储空间(因浏览器而异)来存储名值对儿。Storage的实例与其他对象类似,有如下方法。

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

其中,getItem()、removeItem()和setItem()方法可以直接调用,也可通过Storage对象间接调用。因为每个项目都是作为属性存储在该对象上的,所以可以通过点语法或者方括号语法访问属性来读取值,设置也一样,或者通过delete操作符进行删除。不过,我们还建议读者使用方法而不是属性来访问数据,以免某个键会意外重写该对象上已经存在的成员。

还可以使用length属性来判断有多少名值对儿存放在Storage对象中。但无法判断对象中所有数据的大小,不过IE8提供了一个remainingSpace属性,用于获取还可以使用的存储空间的字节数。

Storage类型只能存储字符串。非字符串的数据在存储之前会被转换成字符串。

sessionStorage对象

sessionStorage对象存储特定于某个会话的数据,也就是该数据只保持到浏览器关闭。这个对象就像会话cookie,也会在浏览器关闭后消失。存储在sessionStorage中的数据可以跨越页面刷新而存在,同时如果浏览器支持,浏览器崩溃并重启之后依然可用(Firefox和WebKit都支持,IE则不行)。

由于sessionStorage对象其实是Storage的一个实例,所以可以使用setItem()或者直接设置新的属性来存储数据。下面是这两种方法的例子。

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

//使用属性存储数据(不建议)
sessionStorage.book = "Professional JavaScript";

localStorage对象

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

由于localStorage是Storage的实例,所以可以像使用sessionStorage一样来使用它。下面是一些例子。

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

//使用属性存储数据(不建议)
localStorage.book = "Professional JavaScript";

你可能感兴趣的:(基础知识)