简单理解Cookies，LocalStorage和sessionStorage

cookies

cookie的基本通信流程：设置cookie => cookie被自动添加到request header中 => 服务端接收到cookie。

当网页要发http请求时，浏览器会先检查是否有相应的cookie，有则自动添加在request header中的cookie字段中。

如果这些数据并不是每个请求都需要发给服务端的数据，浏览器这设置自动处理无疑增加了网络开销；但如果这些数据是每个请求都需要发给服务端的数据（比如身份认证信息），浏览器这设置自动处理就大大免去了重复添加操作。所以对于那设置“每次请求都要携带的信息（最典型的就是身份认证信息）”就特别适合放在cookie中，其他类型的数据就不适合了。

本地存储没出来之前，cookie被滥用，有了限制：每个域名下的cookie 的大小最大为4KB，每个域名下的cookie数量最多为50个。

document.cookie cookie本身就是存储在浏览器中的字符串。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-B6EEHKOU-1603976747641)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\1603976142983.png)]

LocalStorage和SessionStorage

H5的两种存储技术的最大区别就是生命周期：

localStorage---本地存储 长期存储数据，浏览器关闭后数据不丢失。能维持在多个会话范围内;

sessionStorage---会话存储 数据在浏览器关闭后自动删除。只能维持在当前会话范围内。

Web Storage	生命周期	存储大小	存储方式	存储位置
localStorage	生命周期是永久，除非主动清除localStorage信息，否则这些信息将永远存在	存放数据大小为一般为5MB	以键/值对的方式存储，值是字符串	仅在客户端（即浏览器）中保存，不参与和服务器的通信
sessionStorage	仅在当前会话下有效，关闭页面或浏览器后被清除	存放数据大小为一般为5MB	以键/值对的方式存储，值是字符串	仅在客户端（即浏览器）中保存，不参与和服务器的通信

详解：

HTML5的本地存储 API中的 localStorage与 sessionStorage 在使用方法上是相同的，常用的API：

getItem//取记录 setItem//设置记录 removeItem//移除记录 clear//清除记录

sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。当用户关闭浏览器窗口后，数据立马会被删除。（特别提示：新建一个标签页面以后，即使跟前一个页面的地址相同，新建标签页面也获取不到前一个页面中获取或者设置的sessionStorage）

获取不到前一个页面中获取或者设置的sessionStorage）

localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。同一个域名下的localStorage所有页面可以相互访问(数据共享)；但是不同域名之间不能访问。