这段时间尝试使用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的数据库方式来存储的;