写在前面

LocalStorage 和 SessionStorage 是活跃在前端的概念，Session 是活跃在后端的概念，Cookie 是既活跃在前端又活跃在后端的概念，并且Cookie存放在浏览器端。那么四者分别是什么，有什么区别和联系呢？

1 Cookie

Cookie 是服务端下发给浏览器的一段字符串，服务器通过响应头 Response Header 中设置属性 Set-Cookie 来将 Cookie 发送给浏览器。 浏览器必须保存这个 Cookie，之后浏览器发起相同的二级域名的请求时必须带上Cookie，即放在请求头 Request Header 中的 Cookie 属性来附带 Cookie，如下：

Snipaste_2020-04-07_17-42-20.png

Snipaste_2020-04-07_17-42-45.png

Cookie 一般是用来做验证的，用于服务端在短时间内接收相同二级域名的请求时来判断是否是同一用户，常用于登录信息的验证。

Cookie 本身是用户信息等数据，因此 Cookie 实现方式的特点是：用户信息存储在客户端。

由于 Cookie 可以被看到，因此很容易被篡改，因此，Cookie 里面常常存储的不是用户 真正的id，而是常常用于存储 session_id，将用户真正的 id 放在 session 里，然后生成随机键值与真正 id 相对应，将随机 session_id 放到 Cookie 里。在后端获取到 Cookie 里的session_id 后从 session 对象中获取到真正的用户 id 进行操作，这个就是 Session 方式的 Cookie。

Cookie 可以设置 http-only 防止前端篡改。

2 Session

Session 是存储在服务器端的一个文件里，session 存放的是用户信息和其随机生成的session_id组成的键值对，通过 session[session_id]的方式可以访问到真正的用户信息，通过 session 文件的方式将用于信息隐藏起来，不向客户端透漏用户信息，防止被篡改。

session 因为 session id 的存在，通常要借助 cookie 实现。

Session 实现方式的特点是：用户信息存储在服务端，客户端只是存储一个用户信息的映射码。

2.1 Session 的时效性

大部分教程定义 Session 的时效性时说，Session 是在浏览器关闭时就失效了，但其实并不太准确。Session 的时效性其实由 Session 和 Cookie 共同决定。并且 Session 和 Cookie 都可设置过期时间，那么二者的过期时间和 Session 的时效性又有什么关系呢？

  1. 当 Cookie 不设置过期时间时，可视为是会话 Cookie ，会话 Cookie 是存储在浏览器的临时内存中，不会存入磁盘，当浏览器关闭时，Cookie 则会消失。
  2. 当 Cookie 设置了过期时间时，可视为是持久性 Cookie ，会存储在客户端的磁盘中，在过期时间到来时，Cooike 将从磁盘删除。
  3. 客户端请求服务端时，如果客户端的 Cookie 中没有当前会话的 SessionId，则服务端会新分配一个 Session，同时通过算法生成一个唯一的（不重复的）sessionId，并将与该 Session 对应的 SessionId 存到 Cookie 中发回给客户端浏览器。
  4. 由于大部分的网站在发回SessionId时使用了会话Cookie（即 Cookie 没有设置过期时间），导致该 Cookie 存在浏览器内存中，所以关闭浏览器即丢失了SessionId信息，再次访问服务端时才找不到对应的Session，于是才有了“关闭浏览器则Session过期”的说法！
  5. Session 也可以设置过期时间，服务器端通常有一个默认的 Session 过期时间，若访问服务器后，保持不关闭浏览器一段时间，超过Session过期时间后再次访问，会发现依然Session过期找不到了（比如表现为跳转到登录页面），则是“没有关浏览器但Session过期了”！
  6. 因此 Cookie 和 Session 二者有一个过期，则宣告会话结束。因此会话结束不仅仅和 Session 有关，还与 Cookie 有关。Cookie 过期会创建新的 Session，Session 过期会返回新的 Cookie。

3 localStorage

localStorage和sessionStorage都属于Web Storage。
localStorage以键值对的形式存储在浏览器中，永久存储，永不失效，除非手动删除。

4 sessionStorage

sessionStorage 属性允许你访问一个，对应当前源的 session Storage 对象。它与 localStorage 相似，不同之处在于 localStorage 里面存储的数据没有过期时间设置，而存储在 sessionStorage 里面的数据在页面会话结束时会被清除。

  1. 页面会话在浏览器打开期间一直保持，并且重新加载或恢复页面仍会保持原来的页面会话。
  2. 在新标签或窗口打开一个页面时会复制顶级浏览会话的上下文作为新会话的上下文，这点和 session cookies 的运行方式不同。
  3. 打开多个相同的URL的Tabs页面，会创建各自的sessionStorage。
  4. 关闭对应浏览器tab，会清除对应的sessionStorage。

5 Cookie VS Session

  1. Cookie 是服务器发给浏览器的一段字符串，浏览器每次在访问服务器的时候都要带上 Cookie。Session 是会话，表示浏览器与服务器一段时间内的会话
  2. Session 是在服务器上的，Cookie 是在浏览器上的。
  3. Session 一般是基于 Cooike 来实现的，一般将 Session ID 放在 Cookie 里。

6 localStorage VS sessionStorage

  1. LocalStorage 一般不会自动过期（除非用户手动清除），而 SessionStorage 在会话结束时过期（如关闭浏览器）

7 Cookie VS localStorage

  1. 主要区别是 Cookie 会被发送到服务器，而 LocalStorage 不会
  2. Cookie 一般最大 4k，LocalStorage 可以用 5Mb 甚至 10Mb（各浏览器不同）
  3. Cookie 一般是用来存用户信息的，localStorage 存放一些其他的信息。

参考

关于Session过期/失效的理解，session与cookie的交互
一文理解 cookie、localStorage、sessionStorage、session
Cookie、session和localStorage、以及sessionStorage之间的区别
mdn sessionStorage
mdn localStorage