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:


这里以

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实现的问题？）。