理解cookie、session和WebStorage(localStorage和sessionStorage)

网上大多数文章是将 cookie、localStorage 和 sessionStorage 放在一起比较，那么有时候提到的 session 又是什么呢？所以我一直很困惑 session 和 sessionStorage 究竟有无关系。这篇博客是我看了各位大佬的博客，梳理的 学习笔记。

Cookie 和 Session

当浏览器访问一个网页，又在该网页时点击了一些超链接，向服务器请求了一些资源等，这个浏览器和服务器建立TCP连接的过程可以认为是一次 会话。在会话中，需要保存一些数据，如登录信息、访问购物网站的购物信息等，所以出现了两种 保存会话信息 的技术：cookie 和 session。

Cookie

cookie 用于存储会话信息，且存储在客户端。当浏览器第一次访问某个网页时，向服务器请求资源，服务器发送给浏览器的响应头部包含 Set-Cookie 字段（是否发送 cookie 给浏览器取决于服务端），该字段包含 cookie 的 name 和 value （name 和 value 都是URL编码的，且一个 cookie 只能存放一种标识信息，大小一般为4K，浏览器可以存储多个 cookie 信息，具体个数因浏览器而异）；浏览器收到服务器的响应之后，将 cookie 内容存储在浏览器内存（缓存），在下一次访问同一网页，即向同一服务器请求资源时，会将 cookie 内容添加到请求头部的 Cookie 字段发送给服务器，即 cookie 在同源的http请求时携带传递。

浏览器如何读取缓存，涉及到 强缓存 和 协商缓存。建议阅读：彻底理解浏览器的缓存机制

那么，cookie 能够存储多久呢？如果服务器在响应头部没有给 cookie 设置过期日期，那么该 cookie 就是一个会话级别的 cookie（session cookie），浏览器关闭时该 cookie 就没有啦。如果在响应头部 Set-Cookie 字段给 cookie 设置了过期日期（expire / max-age），那么 cookie 就可以持久性存储。
Set-Cookie 字段详见这篇指南：Set-Cookie - HTTP | MDN
cookie 的特点如下：

优点：

• 简单
• 不需要服务器资源
• 可以配置 cookie 的过期日期，数据持久性存储

缺点：

• cookie 的数量和长度有限制
• 同源请求时携带传递，损耗带宽（cookie 信息越大，完成对服务器请求的时间越长）
• 安全性（cookie 数据并非存储在安全环境，可以被他人访问）

Session

session 用于存储会话信息，且存储在服务端。

Session是服务器端技术，利用这个技术，服务器在运行时可以为每一个用户的浏览器创建一个其独享的session对象，由于session为用户浏览器独享，所以用户在访问服务器的web资源时，可以把各自的数据放在各自的session中，当用户再去访问服务器中的其它web资源时，其它web资源再从用户各自的session中取出数据为用户服务。
来源：会话信息cookie和session

session 的缺点：

• 数据存储在服务端，当用户越多，保存的数据越多，服务器压力越大
• session 依赖于 cookie（服务端创建 session 时需要 sessionid，而 sessionid 存储在 cookie 中）

Cookie 和 Session 的区别

1. cookie 是把用户的数据写给用户的浏览器。
2. session 是把用户的数据写到服务器中用户独占的 session 中。
3. session 的安全性大于 cookie
4. session 的存储大小比 cookie 大很多

---

localStorage 和 sessionStorage

为了弥补 cookie 的缺点，HTML5 提出了 Web Storage，包括 localStorage 和 sessionStorage。二者都用于存储数据，且都存储在客户端。与 cookie 不同，localStorage 和 sessionStorage 的数据在请求时不携带传递，且存储空间大小比 cookie 大，一般来说PC浏览器会设置每个来源 5M 的 存储空间。

localStorage

数据保存在客户端本地（硬盘/内存，刷新时先读取内存，再读取硬盘），即使浏览器被关闭了，该数据仍然存在，下次打开浏览器访问网站时仍然可以继续使用。localStorage 中的数据保留到通过 JavaScript 删除或通过用户清除浏览器缓存。

sessionStorage

数据保存在客户端本地，浏览器关闭时数据就没有啦。
在浏览器中每次打开一个窗口就是建立一个独立的会话，每个窗口的 sessionStorage 是独立封闭的，不可以相互访问。但是页面刷新或点击超链接获取另一个同源资源，该会话是可以延续的，即该情况下 sessionStorage 的数据可以共享。

sessionStorage 和 session cookie

做个搬运工，二者区别可以阅读：同样是客户端会话级存储，sessionStorage和session cookie有什么？

sessionStorage 和 session cookie 的作用域不同。在同个浏览器中，通过新建标签页打开的页面之间的 sessionStorage 数据不能共享，而 session cookie 可以共享。
可以通过 这个链接 进行验证：
在控制台写下：

localStorage.setItem("username1",''Tom')
sessionStorage.setItem("username2",''Jack')
document.cookie = "username3=Mary"

开一个新窗口打开这个连接，在 Application 可以看到：

localStorage 和 cookie 的数据可以在两个窗口共享，sessionStorage 则不可以。
窗口关闭之后，再重新打开，则 localStorage 数据还在，其他的数据都没有了。