HTML5本地储存

by 司徒正美

at 2012-10-02 09:07:00

original http://www.cnblogs.com/rubylouvre/archive/2012/10/02/2710100.html

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

本文链接

Google Reader