HTML5中的localStorage

这段时间尝试使用Sencha-touch的组件时，发现其提供了一种store的接口，可以把整个model的数据存在localStorage中，所以特地了解了一下。localStorage提供的接口很直观，具体如下：

 

 

interface localStorage {

  getter any getItem(in DOMString key);

  setter creator void setItem(in DOMString key, in any data);

  deleter void removeItem(in DOMString key);

  void clear();  

  readonly attribute unsigned long length;

  getter DOMString key(in unsigned long index);  

};

 

在Chrome Browser的JavaScript Console中尝试：

 

localStorage["abc"] = 1;

localStorage["bcd"] = 2;

localStorage.setItem("id1", "abc");

localStorage.setItem("id2", "bcd");

 

 

localStorage直接查看，可以看到所有的数据：

 

localStorage的数据存储是以(key, value)方式的，尝试其它的命令：

localStorage.key(0) //显示"abc"

localStorage.key(1) //显示"id2"

localStorage.key(2) //显示"id1"

localStorage.removeItem("bcd") //删除一项

localStorage.length //显示3

localStorage.getItem("id2") //显示"bcd"

 

当把当前网页或者浏览器关掉并再进入时，localStorage中的数据还是存在的。那么，这个数据是存在什么地方的呢？

查找后发现对于Chrome Browser, 其缺省存在以下地址：

C:/Documents and Settings/UserName/Local Settings/Application Data/Google/Chrome/User Data/Default/Local Storage

在这个目录中可以看到一系列以如下方式命名的文件：

http_login.taobao.com_0.localstorage

http_t.sina.com.cn_0.localstorage

chrome_newtab_0.localstorage

...

可以看到每个名字中都有一个网络地址来标识。尝试用文本文件打开一个文件时，发现其是sqlite3的数据库。以刚才存储的那个文件chrome_newtab_0.localstorage为例，用sqlite3打开：

>sqlite3 chrome_newtab_0.localstorage

sqlite>.schma

CREATE TABLE ItemTable (key TEXT UNIQUE ON CONFLICT REPLACE, value TEXT NOT NULL ON CONFLICT FAIL);

 

sqlite>.mode column

sqlite>.headers on

sqlite>select * from ItemTable;

key         value

----------  ----------

abc         1

bcd         2

id1         abc

id2         bcd

 

总结：

1)本地存储是以localStorage来操作的，具体为: window.localStorage;

2)localStorage是以(Key, Value)的方式读取和设置的;

3)Chrome中，不同的网址的localStorage是以不同的文件存储的，文件名中包含了相应地址;

4)Chrome中，文件是以sqlite3的数据库方式来存储的;