PS：这里讲web存储，主要是在客户端存储的一些技术：cookie，localstorage，sessionstorage，WebSQL。
Cookie
Cookie是HTML4中在客户端存储简单用户信息的一种方式，它的应用很多所以有必要回顾一下。它使用文本来存储信息，当有应用程序使用cookie时，服务器端就会发送cookie到客户端。客户端浏览器将保存该信息。下一次页面请求时，客户端浏览器就会把cookie发送到服务器。
优缺点：
1、简答易用。
2、浏览器负责发送数据。
3、浏览器自动管理不同站点的cookie。
缺点：
1.使用简单文本存储数据，所以cookie的安全性很差。cookie保存在客户端浏览器，很容易被客户端盗取。
2.Cookie的存储数据容量有限。上限为4kb。
3.cookie存储的数量有限，多数浏览器上限为30或50个，ie6只支持每个域名存储20个cookie。
4.如果浏览器的安全配置为最高，cookie将失效。
5.cookie不适合大量数据的存储，因为cookie会由每个对服务器的请求来传递，从而造成cookie速度缓慢效率低下。
简单的设置或获取cookie
function setCookie(name, value, expiredays) {
var date = new Date();
date.setDate(date.getDate() + expiredays);
document.cookie = name + "=" + escape(value) + ((expiredays == null) ? "" : ";expires=" + date.toGMTString());
}
setCookie('username', 'Darren', 30);
function getCookie(name) {
if (document.cookie.length > 0) {
var start = document.cookie.indexOf(name + "="); //通过String对象的indexOf()来检查这个cookie是否存在，不存在就为 -1
if (start != -1) {
start = start + name.length + 1; //最后这个+1其实就是表示"="号啦，这样就获取到了cookie值的开始位置
var end = document.cookie.indexOf(";", start);// indexOf()第二个参数表示指定的开始索引的位置
if (end == -1) end = document.cookie.length;
return unescape(document.cookie.substring(start, end)); //通过substring()得到了值。想了解unescape()得先知道escape()是做什么的，都是很重要的基础
}
}
return "";
}
也有Jquery.cookie.js可以用
jQuery.cookie = function(name, value, options) {
if (typeof value != 'undefined') { // name and value given, set cookie
options = options || {};
if (value === null) {
value = '';
options.expires = -1;
}
var expires = '';
if (options.expires && (typeof options.expires == 'number' || options.expires.toUTCString)) {
var date;
if (typeof options.expires == 'number') {
date = new Date();
date.setTime(date.getTime() + (options.expires * 24 * 60 * 60 * 1000));
} else {
date = options.expires;
}
expires = '; expires=' + date.toUTCString(); // use expires attribute, max-age is not supported by IE
}
var path = options.path ? '; path=' + options.path : '';
var domain = options.domain ? '; domain=' + options.domain : '';
var secure = options.secure ? '; secure' : '';
document.cookie = [name, '=', encodeURIComponent(value), expires, path, domain, secure].join('');
} else { // only name given, get cookie
var cookieValue = null;
if (document.cookie && document.cookie != '') {
var cookies = document.cookie.split(';');
for (var i = 0; i < cookies.length; i++) {
var cookie = jQuery.trim(cookies[i]);
// Does this cookie string begin with the name we want?
if (cookie.substring(0, name.length + 1) == (name + '=')) {
cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
break;
}
}
}
return cookieValue;
}
};
$.cookie('the_cookie', 'the_value', { expires: 7, path: '/', domain: 'cnblogs.com'});//设置
var cc = $.cookie('the_cookie');//获取
$.cookie('the_cookie', null);//删除
Web Storage
HTML5 中的Web Storage提供了两种在客户端存储数据的方法，即localStorage和sessionstorage。
localstorage是用于持久化的本地存储，除非主动删除数据，负责数据是永远不会过期的。localstorage的机制和Cookie相似，都是key-value的形式存储，对I/O进行操作；sessionstorage是将数据保存在session对象中，用户关闭浏览器，数据就会删除。不是一种持久化的本地存储，仅仅是会话级别的存储。
两者实现的接口相同。
interface Storage{
readonly attribute unsigned long length;
getter DOMString key(in unsigned long index);
getter any getItem(in DOMString key,in any data);
deleter void removeItem(in DOMString key);
void clear();
}
优缺点
1、IE8下，每个独立的存储空间为10M，其他浏览器略有不同，但有比cookie要大很多。
2、内容不会发送到服务器。
3、更多丰富易用的接口，使得数据的操作更为简便。
缺点：
1.浏览器会为每个域分配独立的存储空间。域A是无法访问到域B的存储空间。
2.本地数据未加密而且永远不会过期，极易造成隐私泄露。
用法：
window.sessionStorage.setItem('mykey', 'niqiu');
window.sessionStorage.nikey = 'stone';
alert(window.sessionStorage.getItem('mykey'));
alert(window.sessionStorage.nikey);
将一段Json存入localstorage：
var data = new Object();
data.name = "stoneniqiu";
data.age = "26";
var str = JSON.stringify(data);
localStorage.setItem(data.name, str); function getstone() {
var raw = localStorage.getItem("stoneniqiu");
var data = JSON.parse(raw);
alert(data.name + data.age);
}
getstone();
用LS存储用户的操作记录，个性化的代码片段。对于性能和使用范围可以看看这篇文章：让我们再谈谈浏览器资源加载优化
Web SQL
Web SQL Database 允许应用通过一个异步JavaScript接口访问SQLLite 数据库，但IE，Firefox并没有实现它，而且WHATWG也停止对Web Sql Database的开发。由于标准认定直接执行SQL语句不可取，Web Sql database 已经被索引数据库(Indexed Database)所取代。
| 浏览器 |
说明
|
|
IE
|
不支持
|
|
FireFox
|
不支持
|
|
Opera
|
10.5及以上支持
|
|
Chrome
|
3.0及以上支持
|
|
Safari
|
3.2及以上支持。 |
HTML5 数据库API主要包括3个核心方法
1.openDatabase：使用现有数据库或创建新数据库的方式创建数数据库对象。
Database openDatabase(in DOMString name,in DOMString version,in DOMString displayName,in unsigned long estimatedSize,in optional DatabaseCallback creationCallback)
参数名称不言而喻 脚本用法：
var db=openDatabase("myDb","0.1","A list of to do items",20000)
这样就创建了一个数据库。
2.transaction：允许用户根据情况控制事务提交或回滚。完整定义：
transaction.executeSql(sqlquery,[],dataHandler,errorHandler):
sqlquery 为要执行的sql语句,[]这个数组表示sql语句中使用的参数数组。所有参数先用？号代替。然后依次将这些参数放在这个数组中。
脚本用法：
db.transaction(function(tx){})
实例：
transaction.executeSql("Update people set age-? where name=?;",[age,name]);
而第三个参数表示执行成功时调用的回调函数。
function dataHandler(transaction,errmsg){}
第四个参数是SQL执行出错时的回调函数
function errorHandler(transaction,errmsg){}
3.executeSql：用于执行真实的SQL查询。
实例：
function initdb() {
var name = ['C#', "C++", "C", "JavaScript", "Java", "PhP"];
db.transaction(function(tx) {
tx.executeSql('Create table if not exists mytable(id integer primary key autoincrement,name)');
for (var i = 0; i < name.length; i++) {
tx.executeSql('insert into mytable(name) values(?)', [name[i]]);
}
});
}
initdb();
一张表包含了用 "AUTOINCREMENT" 修饰的列时, sqlite 将自动创建表 "SQLITE_SEQUENCE"。如果想清空记录，让编号归0，直接处理sqlite_sequence就可以了。
db.transaction(function(tx) {
tx.executeSql('create table if not exists t1(id unique,log)');
tx.executeSql('insert into t1(id,log) values(1,"created a db")');
tx.executeSql('insert into t1(id,log) values(1,"a good day")');
tx.executeSql('insert into t1(id,log) values(1,"hello")');
});
//读取：
db.transaction(function(tx) {
tx.executeSql('select * from t1', [], function(tx, results) {
var len = results.rows.length, i;
var msg = "<p>共有" + len + "条记录</p>";
document.getElementById("res").innerHTML = msg;
for (i = 0; i < len; i++) {
msg = "<p><b>" + results.rows.item(i).log + "</b></p>";
document.querySelector('#res').innerHTML += msg;
}
},null);
});
IndexedDB
IndexedDB很像Nosql。能够存储可观的结构化数据,一个单独的数据库项目的大小没有限制。然而可能会限制每个 IndexedDB 数据库的大小。这个限制（以及用户界面对它进行断言的方式）在各个浏览器上也可能有所不同。比如Firefox4中一个站点超过50M，Firefox会向用户请求权限。在移动端是5M.
使用异步 API 方法调用完后会立即返回，而不会阻塞调用线程。
文档中的示例：
var request = indexedDB.open("library");
request.onupgradeneeded = function () {
// The database did not previously exist, so create object stores and indexes.
var db = request.result;
var store = db.createObjectStore("books", { keyPath: "isbn" });
var titleIndex = store.createIndex("by_title", "title", { unique: true });
var authorIndex = store.createIndex("by_author", "author");
// Populate with initial data.
store.put({ title: "Quarry Memories", author: "Fred", isbn: 123456 });
store.put({ title: "Water Buffaloes", author: "Fred", isbn: 234567 });
store.put({ title: "Bedrock Nights", author: "Barney", isbn: 345678 });
};
request.onsuccess = function () {
db = request.result;
};
更详细的操作我这里也不赘述了，功能比较强大，支持group，filter等大家可以去看下面两篇文章。
IndexedDatabase API http://www.w3.org/TR/IndexedDB/
浏览器支持度：
小结：
本地存储方式比较多，一般的需求还是做一些个性化的存储。cookie和LS都是不错的选择，但是如果要支持离线，存储的数据可能就需要用到IndexedDb这样的存储方式了。