浅谈cookie，sessionStorage和localStorage区别

在客户端存储数据可使用的技术有以下四种：

1.   Cookie技术：浏览器兼容性好，但操做比较复杂，须要程序员本身封装，源生的Cookie接口不友好

2.   H5 WebStorage：不能超过8MB，操做简单；

3.   IndexedDB：可存大量数据，还不是标准技术；

4.   Flash存储：依赖于Flash播放器，Adobe已宣布将放弃Flash,能够再也不考虑此技术。

这里主要讨论cookie和WebStorage:

        共同之处：Cookie和WebStorage都是用来跟踪浏览器用户身份的会话方式。

        名词解释：Session：会话，浏览器从打开某个网站的一个页面开始，中间可能打开不少页面，直到关闭浏览器，整个过程称为“浏览器与Web服务器的一次会话。

         Cookie 是小甜饼的意思。顾名思义，cookie 确实很是小，它的大小限制为4KB左右，它的主要用途有保存登陆信息，好比你登陆某个网站市场能够看到“记住密码”，这一般就是经过在 Cookie 中存入一段辨别用户身份的数据来实现的。

        WebStorage技术中，浏览器为用户提供了两个对象：

        (1)window.sessionStorage：类数组对象，会话级数据存储；

        (2)window.localStorage：类数组对象，本地存储(跨会话级存储)；

        sessionStorage，是在浏览器进程所分得的内存中存储着一次Web会话可用的数据，可供这次会话中全部的页面共同使用；浏览器一旦关闭就消失了。做用：在同一个会话中的全部页面间共享数据。

        localStorage是在浏览器所能管理的外存(硬盘)中存储着用户的浏览数据，可供这次会话以及后续的会话中的页面共同使用，即便浏览器关闭也不会消失，能够说在本地电脑永久存在，除非JavaScript脚步删除或者用户主动清空浏览器缓存。做用：在当前客户端所对应的全部会话中共享数据，如登陆用户名。

        sessionStorage有以下方法，localStorage一样也可以使用这些方法：

    sessionStorage[key] = value       //保存一个数据

    sessionStorage.setItem(key, value) //保存一个数据

    var v = sessionStorage[key]       //读取一个数据

    var v = sessionStorage.getItem(key) //读取一个数据

    sessionStorage.removeItem(key) //删除一个数据

    sessionStorage.clear()    //清除全部数据

    sessionStorage.length    //数据的数量

    sessionStorage.key(i)    //获取第i个key

        localStorage中若数据发生了修改，都会触发一次window.onstorage事件，能够监听此事件，实现监视localStorage数据改变的目的，用于在一个窗口中监视其它窗口中对localStorage数据的修改。但注意window.onstorage不能监视sessionStorage数据的修改！

应用场景

        有了对上面这些差异的直观理解，咱们就能够讨论三者的应用场景了。

由于考虑到每一个 HTTP 请求都会带着 Cookie 的信息，因此 Cookie 固然是能精简就精简啦，比较经常使用的一个应用场景就是判断用户是否登陆。针对登陆过的用户，服务器端会在他登陆时往 Cookie 中插入一段加密过的惟一辨识单一用户的辨识码，下次只要读取这个值就能够判断当前用户是否登陆啦。曾经还使用 Cookie 来保存用户在电商网站的购物车信息，现在有了 localStorage，彷佛在这个方面也能够给 Cookie 放个假了。

        而另外一方面 localStorage 接替了 Cookie 管理购物车的工做，同时也能胜任其余一些工做。好比HTML5游戏一般会产生一些本地数据，localStorage 也是很是适用的。若是遇到一些内容特别多的表单，为了优化用户体验，咱们可能要把表单页面拆分红多个子页面，而后按步骤引导用户填写。这时候 sessionStorage 的做用就发挥出来了。

安全性的考虑

        须要注意的是，不是什么数据都适合放在 Cookie、localStorage 和 sessionStorage 中的。使用它们的时候，须要时刻注意是否有代码存在 XSS 注入的风险。由于只要打开控制台，你就随意修改它们的值，也就是说若是你的网站中有 XSS 的风险，它们就能对你的 localStorage 肆意妄为。因此千万不要用它们存储你系统中的敏感数据。

 

参考资料:

<<JavaScript高级程序设计>>

详说 Cookie, LocalStorage 与 SessionStorage（https://segmentfault.com/a/1190000002723469）