1.背景介绍

什么是Cookie？

Cookie 是小饼干的意思。cookie 确实非常小，它的大小限制为4KB左右， 是由W3C组织提出，最早由Netscape社区发展的一种机制。目前Cookie已经成为标准， 所有的主流浏览器如IE、Netscape、Firefox、Opera等都支持Cookie。 它的主要用途有保存登录信息， 比如你登录某个网站市场可以看到“记住密码”， 这通常就是通过在 Cookie 中存入一段辨别用户身份的数据来实现的。

什么是localStorage？

localStorage 是 HTML5 标准中新加入的技术，它并不是什么划时代的新东西。 早在 IE 6 时代，就有一个叫 userData 的东西用于本地存储，而当时考虑到浏览器兼容性， 更通用的方案是使用 Flash。而如今，localStorage 被大多数浏览器所支持，更多用他来存储数据。

什么是sessionStorage？

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

2.知识剖析

cookie的兼容性

cookie的特性

在同一个页面中设置 Cookie，实际上是按从后往前的顺序进行的。如果要先删除一个 Cookie， 再写入一个 Cookie，则必须先写写入语句，再写删除语句，否则会出现错误
Cookie是面向路径的。缺省路径 (path) 属性时，Web 服务器页会自动传递当前路径给浏览器， 指定路径强制服务器使用设置的路径。 在一个目录页面里设置的 Cookie 在另一个目录的页面里是看不到的
ookie 必须在 HTML 文件的内容输出之前设置；不同的浏览器 (Netscape Navigator、Internet Explorer) 对 Cookie 的处理不一致，使用时一定要考虑；客户端用户如果设置禁止 Cookie，则 Cookie 不能建立。 并且在客户端，一个浏览器能创建的 Cookie 数量最多为 300 个，并且每个不能超过 4KB， 每个 Web 站点能设置的 Cookie 总数不能超过 20 个

一个cookie的设置以及发送过程分为以下四步：

①客户端发送一个http请求到服务器端
②服务器端发送一个http响应到客户端，其中包含Set-Cookie头部
③客户端发送一个http请求到服务器端，其中包含Cookie头部
④服务器端发送一个http响应到客户端

sessionStorage和localStorage的兼容性特性

PC端浏览器

移动端浏览器

local storage和session storage主要通过在js中操作这两个对象来实现， 分别为window.localStorage和window.sessionStorage. 这两个对象均是Storage类的两个实例，自然也具有Storage类的属性和方法。

Storage类的相关成员如下：

6.拓展思考

三者的用途差异？

安全性的考虑?

例如：曾经使用 Cookie 来保存用户在电商网站的购物车信息， 如今有了 localStorage，Cookie就退休了。
还有像一些网页游戏会产生一些本地数据，也使用LocalStorage。
但如果需要拆分页面，会跳转多个子页面的时候，就需要用到sessionStorage。

7.参考文献

参考一:MDN-Cookie Web文档

参考二:详说 Cookie, LocalStorage 与 SessionStorage - 思否