为提高网站的响应速度等，很多web项目都开始用到了本地存储技术。目前HTML本地存储方式有：cookie、localStorage、sessionStorage、indexedDB和webSQL。因HTML5已经放弃了webSQL，所以下边主要介绍下其他四种存储方式。
cookie
传统的Web数据存储方式一直来使用的是Cookie，但Cookie有以下缺陷：
1、cookie会被附加在每个HTTP请求中，所以无形中增加了流量。
2、由于在HTTP请求中的cookie是明文传递的，所以安全性成问题。
3、Cookie的大小限制在4 KB左右,容量达不到要求。
所以cookie只能用于保存一些数据量较小的信息，大部分本地存储的需求都不能满足。
js操作cookie
// 读取cookie
function getCookie(name) {
var arr = document.cookie.match(new RegExp("(^| )" + name + "=([^;]*)(;|$)"));
if(arr != null) return unescape(arr[2]);
return null;
}
// 写入cookie
function setCookie(name, value) {
var Days = 30; // 30 天后此 cookie 过期
var exp = new Date();
exp.setTime(exp.getTime() + Days*24*60*60*1000);
document.cookie = name + "=" + escape(value) + ";expires=" + exp.toGMTString();
}
// 删除cookie
function delCookie(name) {
var exp = new Date();
exp.setTime(exp.getTime() - 1);
var cval = getCookie(name);
if (cval != null) {
document.cookie = name + "=" + cval + ";expires=" + exp.toGMTString();
}
}localStorage 与 sessionStorage
这是HTML5中提供的两种新存储方法，两者的使用方式都一样，唯一的不同点就在于过期时间。localStorage永不失效，除非手动删除，而sessionStorage关闭浏览器就会失效。这两种存储方法有以下几个特点：
1、以键值对(Key-Value)的方式存储。只要是能序列化成字符串的内容都可以存储。
2、存储空间在2M ~ 10M之间。不同的浏览器，存储空间有所不同。
常用的API(以localStorage为例)
localStorage.getItem(key); // 读数据
localStorage.setItem(key, value); // 写数据
localStorage.removeItem(key); // 删数据
localStorage.clear(); // 清空所有数据IndexedDB
IndexedDB是在浏览器中保存结构化数据的一种数据库，为了替换WebSQL（标准已废弃，但被广泛支持）而出现。IndexedDB使用NoSQL的形式来操作数据库，保存和读取是JavaScript对象，同时还支持查询及搜索。IndexedDB有以下特点：
1、IndexedDB保存的是对象，而不是使用表保存数据。一个indexDB数据库，就是一组位于相同命名空间下对象的集合。
2、IndexedDB的操作完全是异步进行的，每一次IndexedDB操作，都需要注册onerror或onsuccess事件处理程序。
3、数据可以按照指定索引查找。
4、支持事物，如果操作失败可进行事物回滚。
5、储存空间大、支持二进制储存。