665字 3.3分钟
CodeWeb 开发中经常会遇到网站需要做一些例如用户备忘录、文章修改自动保存等需求
这些功能不需要长期保存，也不需要入数据库，所以有人可能会考虑使用 Cookie 去进行存储，但是 Cookie 中每条的存储空间为 4k，存储太多的数据时可能会出现存储空间不足的问题
于是就有了 Web 存储来解决这个问题，Web 存储更加的安全与快速。这些数据不会被保存在服务器上，但是这些数据只用于用户请求网站数据上。它也可以存储大量的数据，而不影响网站的性能
HTML5 Web 存储目前有两种存储对象：localStorage 和 sessionStorage
客户端存储数据的两个对象为：
- localStorage – 用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去除
- sessionStorage – 用于临时保存同一窗口 (或标签页) 的数据，在关闭窗口或标签页之后将会删除这些数据
这样两种存储对象的区别也就出来了：localStorage 属于永久性存储，而 sessionStorage 属于当会话结束的时候，sessionStorage 中的键值对会被清空
也就是说 localStorage 对象存储的数据没有时间限制，第二天、第二周或下一年之后，数据依然可用，sessionStorage 对象当用户关闭浏览器窗口后，数据会被删除
HTML5 Web 存储的局限性
- 浏览器的存储大小不统一，并且在 IE8 以上的浏览器版本才支持 HTML5 Web 存储
- 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);