《精通HTML5编程》第九章：Web Sotrage API_H5之家 - 中国HTML5教程资源分享第一站

HTML5中定义的WebStorage已经被广泛的支持。其中有两种类型的Storage API，一种是类似于Key-Value的存储形式，一种使用SQL的存储形式(SQLite)。Key-Value的存储形式又继续细分为两种：sessionStorage和localStoreage。使用SQL的存储方式的书中为起了一个名字叫做Web Sql Database。

检测浏览器支持：

浏览器支持

sessionStorage：

数据的存入：

JavaScript Code复制内容到剪贴板

window.sessionStorage.setItem(‘myFirstKey’, ‘myFirstValue’);
window.sessionStorage.myFirstKey = ‘myFirstValue’; //两种形式等价。

数据的读取：

JavaScript Code复制内容到剪贴板

var ‘myFirstValue’ = window.sessionStorage.getItem(‘myFirstKey’);
var ‘myFirstValue’= window.sessionStorage.myFirstKey; //两种形式等价。

使用sessionStorage对象存入的数据在窗口或者tab关闭之前都有效，sessionStorage的作用域被限制在一个windows或者tab内。

其他属性：
length：对象中存储的键值对的数量。
key(index)：返回指定的key，多用来遍历存入的对象。Index从0开始。
getItem(key) ：返回指定key的value，如果key不存返回null。
setItem(key, value)：存入一个value。如果key已经存在，则替换这个key。注意，如果用户关闭离线存储功能或存储空间已经满时，此操作会抛出异常。
removeItem(key) ：删除指定的key。
clear()：删除所有数据。

存储限额：
标准建议的限额是每个origin 5M的限度，不过在数据达到限制时不同的浏览器的行为不同。有些浏览器提示用户分配更过的容量，有些浏览器则抛出QUOTA_EXCEEDED_ERR异常。

事件：
如果想在多个页面（或者web worker）中访问存储的数据，或者想在存储成功时执行一些操作都可以适用Sotrage API提供的事件。该事件会在同源的（same origin）每个页面的windows对象触发。

可以使用如下方法注册事件：

JavaScript Code复制内容到剪贴板

window.addEventListener(“storage”, displayStorageEvent, true);

事件参数又如下属性：

JavaScript Code复制内容到剪贴板

interface StorageEvent : Event {
readonly attribute DOMString key;
readonly attribute any oldValue;
readonly attribute any newValue;
readonly attribute DOMString url;
readonly attribute Storage storageArea;
};

key：发生改变的key。
oldValue：之前的数值。如果是新建数据，oldValue为null。如果是删除数据，newValue值为null。
url：存储对象的origin。
storageArea：保存数值发生改变的sessionStorage或者localStorage对象的引用。

localStorage:

localStorage对象和sessionStorage对象几乎完全相同，不同的地方如下：

sessionStorage在页面不关闭之前有效，localStorage持久存在
sessionStorage只有创建数据的页面可以访问，sessionStorage同源的页面都可以访问

locaStorage有点像c++中的静态成员变量。

例子：

JavaScript Code复制内容到剪贴板

// display the contents of a storage event
function displayStorageEvent(e) {
var logged = “key:” + e.key + “, newValue:” + e.newValue + “, oldValue:” +
e.oldValue +”, url:” + e.url + “, storageArea:” + e.storageArea;
alert(logged);
}
// add a storage event listener for this origin
window.addEventListener(“storage”, displayStorageEvent, true);

Web Sql Database：
书上提及，由于WebSqlDatabase限制使用sqlite的语法，firefox坚持不支持WebSqlDatabase。且已经有新的标准Indexed Database (WebSimpleDB)出台来取代这个标准，所以书上对这个标准只是简单提了一下，我干脆就跳过了。

使用JSON存储对象：

虽然标准规定任何sessionStorage和localStorage可以存储任何对象，但是有些浏览器仅允许字符串对象的存入，所有可以使用JSON将对象序列化之后在存储。