本文主要介绍的是localStorage和sessionStorage的使用方法和一些特性，以及一些其他的存储方式的比较。
客服端存储方案包括以下几种：
1、Cookie
2、UserData
3、Flash SharedObject
4、Google Gears
5、Web SQL Database
6、WebStorage
7、IndexedDB（Indexed Database）
把Cookie抛开，以上几种存储方案2-5不建议使用，原因见下文详解。把Cookie抛开不论，是因为它是不可缺少的，Cookie的作用是跟服务器进行交互，作为HTTP规范的一部分。而以上其他的方案都是为了在本地“存储”数据而生。
暂时推荐使用第6种方案，但是因为WebStorage只兼容到IE8+ ，所以他需要和UserData配合使用（用于兼容），详解见下文。
Cookie
略过。。。
UserData
它由Microsoft公司在IE5中引用，是保存在用户本地的一块持久话数据，除非你手动删除或者设置过期时间，否则它将一直保存在本地终端，只有IE5-IE9支持。它借助了DHTML的Behaviour属性来存储本地数据，没个页面最大限制64K数据，每个站点最大限制640K数据。
缺点：并非WEB标准，只有IE5-IE9支持，无法有效解决浏览器兼容。
Flash SharedObject
它允许你在本地客户端的硬盘或是服务器上存储所有flash支持的数据(Number, String, Array, Boolean, Object, XML等)，数据会永久性保存，没有过期时间，可以通过设置管理器或调用clear()方法清除。按存放位置可以分为本地共享对象和远程共享对象。默认存储大小为100KB，用户可以手动设置，最大为10M。
缺点：它的缺点就是因为它是Flash。Flash有安全，稳定性差，好系统资源等缺点。
Google Gears
Google于07年发布的一个开源浏览器插件，内置了一个基于SQLite的嵌入式SQL数据库，并提供了统一的API访问数据库。在取得用户授权之后，每个站点可以在数据库中存储大小不限的数据。但是Google早在chrome 12.0 中就已经放弃了对它的支持。
缺点：就是因为Google都已经放弃它了
Web SQL Database
HTML5引入的一个用来处理大量结构化数据的方案。它是使用SQL来操纵客户端数据库的API，规范中使用的语言是SQLlite，但是这个方案基本已经废弃了。因为W3C规范已经停止使用此规范了。
缺点：就是因为W3C已经停止使用此规范，也就是说这是一个废弃的标准。
Web Storage
这是本文推荐的一个存储方案，所以会做一个详细介绍。
1、介绍
Web Storage是由两部分组成：localStorage、sessionStorage。localStorage用于持久化数据存储，不主动删除，数据是永远不会过期的（包括清除缓存）。sessionStorage顾名思义（session）是用于存储一个会话中的数据，当会话结束数据会随之销毁。因此sessionStorage不能用来作持久化数据存储。
存储形式：Key value 名值对
存储空间： IE：10MB； Chrome4+，Safari4+：2.5MB； Firefox4+，Opera10.5+：5MB
兼容：IE8+；chrome4+; firefox3.5+ ; safari4+ ; Opera10.5+
属性和方法：
setItem(key,value)
将value值存储到本地的key字段
getItem(key)
获取指定key本地存储的值
removeItem(key)
删除指定key本地存储的值
clear()
删除存储的所有数据
key(index)
根据索引获取一个指定位置的键名
length
获取存储的键值对的数量
示列：
localStorage.setItem("name","Ch"); //存储（修改）一条key值为name的数据，并且value值为：Ch
localStorage.getItem("name"); //获取Key值为name的value值
localStorage.reomveItem("name"); //删除Key值为name的数据
localStorage.clear();//清除所有存储在localStorage的数据
注意：1、sessionStorage方法同上。
2、此方案保存的是字符串，如果是JSON数据，得调用stringify()方法转成字符串再保存。
事件：
storage 当localStorage和sessionStorage的数据产生变化时会触发此事件，storage事件有如下属性：
storageAera: 表示存储类型(session或者local)
key: 发生改变项的key
oldValue: key原来的值
newValue: key改变后的值
url：导致key发生改变的url
示列：
//假如已存储 localStorage 数据 key:name,value:Ch
window.addEventListener("storage",function(e){
console.log("改变的Key："+e.key);
console.log("旧值："+e.oldValue);
console.log("新值："+e.newValue);
console.log("发生变化的URL："+e.url);
});
localStorage.setItem("name","huihui"); //所在页面 app/list.html
上面代码会输出
改变的Key：name
旧值：Ch
新值：huihui
发生变化的URL：app/list.html
类型：local
还有一点需要注意，在Firefox和Chrome中对storage事件的触发有点不同, 自身页面调用setItem()改变某键的值后并没有触发window的storage事件, 但是如果同时访问A.html和B.html, 在A页面中调用setItem()改变某键的值后能触发B页面中的storage事件, 反之同理。而在IE9中, 自身页面调用setItem()改变某键的值后也能触发window的storage事件。
缺点：不支持IE7-，如需兼容需要配合UserData使用。
WebStorage容量大、易用、原生支持等优点都使它成为首选的本地存储方案，当然它的安全性也较差，不能用它来保存敏感信息。
IndexedDB
Indexed Database 是Oracle于2009年提出的，简称IndexedDB，是一种能让你在用户的浏览器中持久地存储结构化数据的数据库，为web应用提供了丰富的查询能力。它使用对象来保存数据，按域名分配独立空间，一个独立域名下可以创建多个数据库，每个数据库可以创建多个对象存储空间，一个对象存储空间相当于一个数据库表，可以存储多个对象数据。目前仅Chrome11+/Firefox4+/IE10支持。Firefox4+支持最大存储50MB的数据(移动端5MB)，chrome11+支持最大存储5MB的数据。
缺点：目前仅Chrome11+/Firefox4+/IE10+支持