【郑州-第147期】cookies，sessionStorage

大家好，我是IT修真院郑州分院第一期的学员胡嘉杰，一枚正直纯洁善良的WEB前端程序员。
今天给大家分享一下，修真院官网JS任务6，深度思考中的知识点——请描述一下cookies，sessionStorage和localStorage的区别？

1.背景介绍

当我们在网页中向服务器请求信息时，一般发送http请求， 但是HTTP协议是无状态协议，无状态是指协议对于事务处理没有记忆能力， 一旦数据交换完毕，客户端与服务器端的连接就会关闭，再次交换数据需要建立新的连接。 这就意味着服务器无法从连接上跟踪会话。那当我们在一个网站登录之后， 在网站其他页面怎么判断是否已经登录？ 要跟踪该会话，必须引入一种机制。

2.知识剖析

1.cookie

Cookie 是小甜饼的意思。顾名思义，cookie 确实非常小，它的大小限制为4KB左右， 是网景公司的前雇员 Lou Montulli 在1993年3月的发明。

• cookie指的是储存在用户本地终端上的数据，它是由Web服务器创建的， 当客户端第一次请求服务器，如果服务器需要记录该用户状态，就使用response向客户端浏览器颁发一个Cookie。 客户端浏览器会把Cookie保存起来。当浏览器再请求该网站时，浏览器把请求的网址连同该Cookie一同提交给服务器。 服务器检查该Cookie，以此来辨认用户状态。服务器还可以根据需要修改Cookie的内容。

• Cookie在生成时就会被指定一个Expire值，这就是Cookie的生存周期，在这个周期内Cookie有效， 超出周期Cookie就会被清除。有些页面将Cookie的生存周期设置为“0”或负值，这样在关闭浏览器时, 就马上清除Cookie，不会记录用户信息，更加安全。

• 用户也可以在浏览器端进行设置，禁止服务器向客户端浏览器颁发一个Cookie。

• 我们可以在脚本中读取，创建和存储 cookie; 例如下面的代码会输出本页面所有的Cookie。

document.write(document.cookie);

2.localStorage

• localStorage 是 HTML5 标准中新加入的技术，它并不是什么划时代的新东西。早在 IE 6 时代， 就有一个叫 userData 的东西用于本地存储，而当时考虑到浏览器兼容性，更通用的方案是使用 Flash。 而如今，localStorage 被大多数浏览器所支持，如果你的网站需要支持 IE6+， 那以 userData 作为你的 polyfill 的方案是种不错的选择。

3.sessionStorage

• sessionStorage 与 localStorage 的接口类似，但保存数据的生命周期与 localStorage 不同。 做过后端开发的同学应该知道 Session 这个词的意思，直译过来是“会话”。而 sessionStorage 是一个前端的概念， 它只是可以将一部分数据在当前会话中保存下来，刷新页面数据依旧存在。但当页面关闭后，sessionStorage 中的数据就会被清空。

特性	Cookie	localStorage	sessionStorage
数据的生命期	可设置失效时间，默认是关闭浏览器后失效	除非被清除，否则永久保存	仅在当前会话下有效，关闭页面或浏览器后被清除
存放数据大小	4K左右	一般为5MB	一般为5MB
与服务器端通信	每次都会携带在HTTP头中，如果使用cookie保存过多数据会带来性能问题	仅在客户端（即浏览器）中保存，不参与和服务器的通信	仅在当前会话下有效，关闭页面或浏览器后被清除
易用性	需要程序员自己封装，源生的Cookie接口不友好	源生接口可以接受，亦可再次封装来对Object和Array有更好的支持	源生接口可以接受，亦可再次封装来对Object和Array有更好的支持

• localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。 sessionStorage存储的数据只在会话期间有效，关闭浏览器则自动删除。
• 所以，在其它页面保持登录，可以在登录后往本地storage中存储一个关键字段（存储用户信息）,如 :login：true
  在路由变化的时候，或者在页面跳转的时候，检测是该字段值是否正确，不正确则跳转登录页；点击注销可以执行删除

3.常见问题

• Cookies包含了一些敏感信息：用户名，计算机名，使用的浏览器和曾经访问的网站, 在某种程度上说已经严重危及用户的隐私和安全。

4.解决方案

下面方法能增加安全性：

1. 设置该 Cookie 不能被脚本读取；
2. 对 Cookie 内容进行加密，在加密前嵌入时间戳，保证每次加密后的密文都不一样（并且可以防止消息重放）；
3. 客户端请求时，每次或定时更新 Cookie 内容；
4. 每次向 Cookie 写入时间戳，数据库需要记录最后一次时间戳；
5. 客户端提交 Cookie 时，先解密然后校验时间戳，时间戳若小于数据数据库中记录，即意味发生攻击。

5.编码实战

6.扩展思考

WEB STORAGE相对于COOKIE的优势：

1. 从容量上讲WebStorage一般浏览器提供5M的存储空间，用来存储视频、图片神马的不够，但对于绝大部分操作足矣
2. 安全性上WebStorage并不作为HTTP header发送的浏览器，所以相对安全。
3. 从流量上讲，因为WebStorage不传送到服务器，所以不必要的流量可以节省。

7.参考文献

1. HTML5 WebStorage
2. 360百科
3. Nancy的专栏

8.更多讨论

• 存储方案各自的性能如何，他们的区别？

---

技能树.IT修真院
“我们相信人人都可以成为一个工程师，现在开始，找个师兄，带你入门，掌控自己学习的节奏，学习的路上不再迷茫”。

这里是技能树.IT修真院，成千上万的师兄在这里找到了自己的学习路线，学习透明化，成长可见化，师兄1对1免费指导。快来与我一起学习吧~
我的邀请码：64290793，或者你可以直接点击此链接：http://www.jnshu.com/login/1/64290793