一个比 Cookie 更好的本地存储方式 – HTML5 Web 存储

Web 开发中经常会遇到网站需要做一些例如用户备忘录、文章修改自动保存等需求

这些功能不需要长期保存，也不需要入数据库，所以有人可能会考虑使用 Cookie 去进行存储，但是 Cookie 中每条的存储空间为 4k，存储太多的数据时可能会出现存储空间不足的问题

于是就有了 Web 存储来解决这个问题，Web 存储更加的安全与快速。这些数据不会被保存在服务器上，但是这些数据只用于用户请求网站数据上.它也可以存储大量的数据，而不影响网站的性能

HTML5 Web 存储目前有两种存储对象：localStorage 和 sessionStorage

客户端存储数据的两个对象为：

localStorage – 用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去除
sessionStorage – 用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据

这样两种存储对象的区别也就出来了：localStorage 属于永久性存储，而 sessionStorage 属于当会话结束的时候，sessionStorage 中的键值对会被清空

也就是说 localStorage 对象存储的数据没有时间限制，第二天、第二周或下一年之后，数据依然可用，sessionStorage 对象当用户关闭浏览器窗口后，数据会被删除

HTML5 Web 存储的局限性

1、浏览器的存储大小不统一，并且在 IE8 以上的浏览器版本才支持 HTML5 Web 存储

2、HTML5 Web 存储本质上是对字符串的读取，如果存储内容多的话会消耗内存空间，会导致页面变卡

HTML5 Web 存储的使用

不管是 localStorage，还是 sessionStorage，可使用的 API 方法都相同，常用的有如下几个（以localStorage为例）：

保存数据：localStorage.setItem(key,value);
读取数据：localStorage.getItem(key);
删除单个数据：localStorage.removeItem(key);
删除所有数据：localStorage.clear();
得到某个索引的key：localStorage.key(index);

需要使用 sessionStorage 的时候，只需要将 localStorage 替换成 sessionStorage 即可

在使用的时候最好将数据转为 JSON 字符串然后存入

贴个实例：

// 监听textarea变化
$("textarea").change(function(){
    // 变量名随意
    var wikiContent = {'content' : $('#content').val()}; 
    // 存储值：将对象转换为Json字符串。如果有多条数据的话，key 最好做一下区分
    localStorage.setItem("wikiContent", JSON.stringify(wikiContent));
});

var wikiJsonStr = localStorage.getItem("wikiContent");
// 取值时：把获取到的Json字符串转换回对象
wikiLocalContent = JSON.parse(wikiJsonStr);
// 获取对应的值
console.log(wikiLocalContent.content);