HTML5 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():清空所有变量。

5.localStorage的实例代码
我们在jquery{cookie插件:实现换肤和排序}上面做一些扩展，让支持localStorage的浏览器渐进增强，不支持的浏览器使用cookie替代。

 
JavaScript Code复制内容到剪贴板
$(function(){ 
var $li =$("#skin li"); 
$li.click(function(){ 
switchSkin( this.id ); 
}); 
if(window.localStorage){//判断是否支持localStorage 
var cookie_skin = localStorage.getItem("MyCssSkin"); 
}else{ 
var cookie_skin = $.cookie( "MyCssSkin"); 
} 
if (cookie_skin) { 
switchSkin( cookie_skin ); 
} 
bindKeyDown(); 
}); 
//换肤 
function switchSkin(skinName){ 
$("#"+skinName).addClass("selected") //当前 
<li>元素选中 
.siblings().removeClass("selected"); //去掉其它同辈 
</li><li>元素的选中 
$("#cssfile").attr("href",skinName+"/css/index.css"); //设置不同皮肤 
if(window.localStorage){ 
localStorage.setItem("MyCssSkin" ,  skinName); 
}else{ 
$.cookie( "MyCssSkin" ,  skinName); 
} 
} 
//排序 
function bindKeyDown() { 
var foo = $("#sortable").sortable({ 
update: function (e, ui) { 
var order = foo.sortable("toArray").join(); 
if(window.localStorage){ 
localStorage.setItem("sortableOrder", order); 
}else{ 
$.cookie("sortableOrder", order); 
} 
} 
}); 
var foo = $("#sortable"); 
if(window.localStorage){ 
var order = localStorage.getItem("sortableOrder"); 
}else{ 
var order = $.cookie("sortableOrder"); 
} 
if (order) { 
$(order.split(',')).each(function (i, id) { 
$("#" + id).appendTo(foo); 
}); 
} 
foo.sortable('options'); 
} 
</li> 

6.localStorage在浏览器的保存