深入理解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";