浅谈cookie，sessionStorage和localStorage区别

Posted 2020-10-01 高辛戊

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

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）