客户端数据存储 --- web storage From 《高程3》

前言

本文首先介绍web storage和Cookie的对比，解释web storage的优势；随后指出怎样使用插firebug插件的扩展firestorage-plus查看web storage；然后介绍storage的方法和属性，sessionStorage和localStorage的方法和属性继承自storage；最后介绍sessionStorage和localStorage。

0 为什么引入web storage（对比Cookie）？

cookie不适合大量数据的存储（Cookie的大小是受限的），因为它们由每个对服务器的请求来传递（每次你请求一个新的页面的时候cooki都会被发送过去），这使得cookie 速度很慢而且效率也不高。web storage的目的就是取代Cookie进行大量的本地数据存储，其中sessionStorage不能进行跨会话存储，这可以使用localStorage弥补。

1 怎么使用firebug查看web storage？

一款针对firebug插件的扩展：firestorage-plus：
https://addons.mozilla.org/en...
一篇相关的介绍：
http://www.softwareishard.com...

firestorage-plus的简单测试：

essionStorage.setItem("name", "Nicholas");
console.log(sessionStorage.name);

在firebug的DOM菜单找到localStorage和sessionStorage选项，可以查看web storage，这样查看给出的信息有限。

也可以通过firestorage-plus进行查看：

选中某一个storage并右键，甚至可以对其进行编辑，可见这个插件确实比较简单好用。

2 storage的方法和属性

关于web storage，只需要了解两个对象：localStorage和sessionStorage，它们都是storage的实例，因此会继承storage的方法和属性，包括：

clear()： 删除所有值； Firefox 中没有实现 。
getItem(name)：根据指定的名字 name 获取对应的值。 
key(index)：获得 index 位置处的值的名字。
removeItem(name)：删除由 name 指定的名值对儿。
setItem(name, value)：为指定的 name 设置一个对应的值。
length 属性：判断有多少名值对儿存放在 Storage 对象中。

需要注意，web存储的数据类型都是字符串，如果需要其他类型，需要自行转换。

3 sessionStorage 对象

sessionStorage 对象存储特定于某个会话的数据，也就是该数据只保持到浏览器关闭。这个对象就像会话 cookie，也会在浏览器关闭后消失。存储在 sessionStorage 中的数据可以跨越页面刷新而存在，同时如果浏览器支持，浏览器崩溃并重启之后依然可用（Firefox 和 WebKit 都支持， IE 则不行）。存储在 sessionStorage 中的数据只能由最初给对象存储数据的页面访问到，所以对多页面应用有限制。
根据sessionStorage继承自storage的方法和属性，可以有如下操作：

//使用方法存储数据
sessionStorage.setItem("name", "Nicholas");
//使用属性存储数据
sessionStorage.book = "Professional JavaScript";

sessionStorage 中有数据时，可以使用 getItem()或者通过直接访问属性名来获取数据。

//使用方法读取数据
var name = sessionStorage.getItem("name");
//使用属性读取数据
var book = sessionStorage.book;

还可以通过结合 length 属性和 key()方法来迭代 sessionStorage 中的值，如下所示。

sessionStorage.setItem('name', 'Nicholas');
sessionStorage.setItem('age', '20');
sessionStorage.setItem('height', '180cm');
for (var i = 0, len = sessionStorage.length; i < len; i++) {
  var key = sessionStorage.key(i);
  var value = sessionStorage.getItem(key);
  console.log(key + '=' + value);
}

还可以使用 for-in 循环来迭代 sessionStorage 中的值：

for (var key in sessionStorage){
var value = sessionStorage.getItem(key);
alert(key + "=" + value);
}

要从 sessionStorage 中删除数据，可以使用 delete 操作符删除对象属性，也可调用
removeItem()方法。

//设置四个值
sessionStorage.setItem('name', 'Nicholas');
sessionStorage.setItem('age', '20');
sessionStorage.setItem('height', '180cm');
sessionStorage.setItem('book', 'ring of the king');
//使用 delete 删除一个值——在 WebKit 中无效
delete sessionStorage.name;
//使用方法删除一个值
sessionStorage.removeItem("book");

在firebug中可以看到只剩两个值：

4 localStorage 对象

localStorage 中的数据保留到通过 JavaScript 删除或者是用户清除浏览器缓存。要访问同一个 localStorage 对象，页面必须来自同一个域名（子域名无效），使用同一种协议，在同一个端口上，这类似于Ajax的同源策略。
由于 localStorage 是 Storage 的实例，所以可以像使用 sessionStorage 一样来使用它。下面是一些例子。

//使用方法存储数据
localStorage.setItem("name", "Nicholas");
//使用属性存储数据
localStorage.book = "Professional JavaScript";

//使用方法读取数据
var name = localStorage.getItem("name");
//使用属性读取数据
var book = localStorage.book;

一般来说，对存储空间大小的限制都是以每个源（协议、域和端口）为单位的。换句话说，每个源都有固定大小的空间用于保存自己的数据。考虑到这个限制，就要注意分析和控制每个源中有多少页面需要保存数据。
对于 localStorage 而言，大多数桌面浏览器会设置每个来源 5MB 的限制。 Chrome 和 Safari 对每个来源的限制是 2.5MB。而 iOS 版 Safari 和 Android 版 WebKit 的限制也是 2.5MB。
对 sessionStorage 的限制也是因浏览器而异。有的浏览器对 sessionStorage 的大小没有限制，但 Chrome、 Safari、 iOS 版 Safari 和 Android 版 WebKit 都有限制，也都是 2.5MB。 IE8+和 Opera 对sessionStorage 的限制是 5MB。