HTML5本地储存

• sessionStorage
• localStorage

都实现了Storage Interface：

interface Storage {
  readonly attribute unsigned long length;
  [IndexGetter] DOMString key(in unsigned long index);
  [NameGetter] DOMString getItem(in DOMString key);
  [NameSetter] void setItem(in DOMString key, in DOMString data);
  [NameDeleter] void removeItem(in DOMString key);
  void clear();
};

length表示当前存储的values的个数；
key()方法返回与index相对应的item的key， 如果在storage中有2个value，那么key(0)则是第一个value的keyName：

localStorage.setItem('key1', 1);
localStorage.key(0)// --->; 'key1'

getItem, setItem, removeItem的用法和一般的Dict是一样的。

需要注意

• key/value都是String类型，一个object在保存前会调用其toString()方法，所以要自己做处理，一般是用JSON
• Storage 对象作为localStorage/sessionStorage 的constructor存在，所以可以为Storage添加方法，则localStorage/sessionStorage都可以访问到(通过Storage.prototype.xxx=...)
• storage 中的值可以通过普通的obj["keyname"]的形式进行get/set, 但仍推荐使用getItem/setItem方法
• localStorage中的值没有expire time设置
• sessionStorage中的值在页面reload/restore是仍然有效，但是窗口/Tab关闭后再重新打开则无效

Web Stroage的事件

根据W3C的Specification:

When the setItem(), removeItem(), and clear() methods are called on a Storage object x that is associated with a local storage area, if the methods did something, then in every Document object whose Window object’s localStorage attribute’s Storage object is associated with the same storage area, other than x, a storage event must be fired…

这里以localStorage为例说明。
一个key-value被改动时，会触发’storage’事件（你可以通过window.addEventListener(‘storage’…)来监听）。需要注意的是，当你在不同的tab/window对localStorage进行操作时，这个event才会被触发。因此，当你在同一个tab/window内操作时，你的当前tab/window不会触发这个event，即上文所说的“other than x”

一个简单的demo是：
1. 打开一个Chrome Tab, 在console中输入

window.addEventListener('storage', function(e){ console.log(e) });
localStorage('key', 'v1');//saved a data

2. 在另一个tab中， console输入:

localStorage('key', 'v2');//change

3. 检查第一个tab的输出，你会看到类似下面的输出(删去了一些不必要的细节)：

StorageEvent
{
bubbles: false,
cancelBubble: false,
cancelable: false,
key: "key",
newValue: "v2",
oldValue: "v1",
storageArea: Storage,
timeStamp: 1324953524367,
type: "storage",
url: "https://www.google.com/#sclient=psy..."
}

StorageEvent的Interface定义:

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

• key : 触发这个事件的storage的key
• oldValue : 事件前该key对应的value
• newValue : 事件后该key对应的value
• url : 触发这个事件的window的url(在那个tab中key被更改的)
• storageArea : 现在都是返回Storage

但是W3C对sessionStorage的storage事件触发机制描述的很模糊， 我没有能够成功触发storage事件（或者是因为Chrome实现的问题？）。