HTML5特性 > 本地储存>localStorage简要说明

1.localStorage是什么

localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。

2.localStorage有哪些优点

1. 存储空间

存储空间 更大：IE8下每个独立的存储空间为10M，其他浏览器实现略有不同，但都比Cookie要大很多。

2. 服务器

存储内容不会发送到服务器：当设置了Cookie后，Cookie的内容会随着请求一并发送的服务器，这对于本地存储的数据是一种带宽浪费。而Web Storage中的数据则仅仅是存在本地，不会与服务器发生任何交互。

3.接口

更多丰富易用的接口：Web Storage提供了一套更为丰富的接口，使得数据操作更为简便。

4. 存储空间

独立的存储空间：每个域（包括子域）有独立的存储空间，各个存储空间是完全独立的，因此不会造成数据混乱。

当把当前网页或者浏览器关掉并再进入时，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的数据库方式来存储的;

3.浏览器对localStorage的支持情况

转一个测试结果
Chrome4+ 开始支持localStorage
Firefox3.5+开始支持localStorage
Firefox1.5+支持globalStorage
IE8+支持localStorage
IE7兼容模式支持localStorage
IE5.5+支持userdata
Safari 4+ 支持localStorage
Opera10.5+支持localStorage
Netscape Navigator最后一版（9.0.0.6）支持localStorage，其余版本未测

现在主流的浏览器除ie6，ie7外都支持localstorage，可以支持的用localstorage，不支持的用cookie代替

4.localStorage的用法

localStorage. length:返回现在已经存储的变量数目。
localStorage. key(n):返回第n个变量的键值(key)。
localStorage.getItem(k):和localStorage.k一样，取得键值为k的变量的值。
localStorage.setItem(k , v):和localStorage.k = v一样，设置键值k的变量值。
localStorage.removeItem(k):删除键值为k的变量。
localStorage.clear():清空所有变量。

6.localStorage在浏览器的保存