localStorage 使用总结

教程

http://www.cnblogs.com/st-leslie/p/5617130.html
http://jerryzou.com/posts/cookie-and-web-storage/

localStorage / session / cookie 的异同

特性	Cookie	localStorage	session
数据的生命周期	一般由服务器生成，可设置失效时间。如果在浏览器端生成的 Cookie,默认是关闭浏览器后失效	除非被清除，否则永久保存	仅在当前会话下有效，关闭页面或浏览器后清除
存放数据的大小	4kb	5M	5M
与服务器端通信	每次都会携带在HTTP头中，如果使用cookie保存过多数据会带来性能问题	仅在浏览器中保存，不参与和服务器的通信	仅在浏览器中保存，不参与和服务器的通信
易用性	需要程序员自己封装，源生的Cookie接口不友好	源生接口可以接受，也可再次封装	源生接口可接受，也可再次封装

应用场景

因为每个 HTTP 请求都会携带 Cookie 信息，所以 Cookie 一般用来判断用户是否登录。针对登录过的用户，服务器会在登录时往 Cookie 中插入一端加密过的单一用户的标识码。下次只要读取这个值就能判断用户是否登录。

localStorage 存储一些本地数据，这些数据一般是不经常改变的。

如果是数据是经常改变的，那使用 Session 作为缓存更有效。如果遇到一些内容特别多的表单，为了优化用户体验，我们可能要把表单页面拆分成多个子页面，然后按步骤引导用户填写。这时候 sessionStorage 的作用就发挥出来了。

安全性

不是什么数据都适合存放在 Cookie 、localStorage 和 Session 中的。使用它们需要防范 XSS 注入的风险。因为打开 控制台，就能随意修改它们的值。

API

• 更新元素

localStorage.setItem("mycat", "Tom");

• 获取元素

localStorage.getItem("myCat"); 

• 移除元素

localStorage.remove("myCat");

• 清除 localStorage 中所有的元素

localStorage.clear();