浏览器存储全解析-优快云博客

本文链接：https://blog.youkuaiyun.com/baidu_33569474/article/details/109189018

浏览器存储包括了 Cookies、Local Storage、Session Storage、IndexedDB、WebSQL 这 5 种形式的本地存储。

Cookies

Cookie 的本职工作并非本地存储，而是“维持状态”。
因为HTTP协议是无状态的，HTTP协议自身不对请求和响应之间的通信状态进行保存。Cookie 是用来绕开HTTP的无状态性的“额外手段”之一。

Cookie的生成方式主要有两种：

通过响应头里的 Set-Cookie 指定要存储的 Cookie 值
在 js 中通过 document.cookie 可以读写 Cookie，以键值对的形式展示

Cookie 的特点：

Cookie 的大小限制在 4KB 左右，此外很多浏览器对一个站点的 Cookie 个数也是有限制
由于请求会携带 Cookie，故过多的 Cookie 会带来巨大的性能浪费

Cookie 与安全：
在这里插入图片描述
关于Cookie 的 SameSite 属性，可参见阮一峰老师的这篇文章，以及作者在实际项目中遇到的关于SameSite 的问题。

HTML5 中新增了本地存储的解决方案----Web Storage，它分成两类：sessionStorage和localStorage。这样有了WebStorage后，cookie能只做它应该做的事情了——作为客户端与服务器交互的通道，保持客户端状态。

Session Storage、Local Storage

Session Storage 的特点：

会话级别的浏览器存储，当会话结束（通常是该窗口关闭），数据被清空
大小为5M左右
仅在客户端使用，不和服务端进行通信

Local Storage 的特点：

保存的数据长期存在，下一次访问该网站的时候，网页可以直接读取以前保存的数据。
大小为5M左右
仅在客户端使用，不和服务端进行通信

Session Storage、Local Storage 的区别：

【作用域】：Local Storage 只要求同源，就能读取/修改到同一份 Local Storage 数据。Session Storage，除了要求同源外，还要求在同一窗口（也就是浏览器的标签页）
【生命周期】：Local Storage 是持久化的本地存储，存储在其中的数据是永远不会过期的，使其消失的唯一办法是手动删除；而 Session Storage 是临时性的本地存储，它是会话级别的存储，当会话结束（页面被关闭）时，存储内容也随之被释放。

Session Storage、Local Storage 的使用方式类似：

sessionStorage.setItem('key', 'value');
sessionStorage.getItem('key');
sessionStorage.removeItem('key');
sessionStorage.clear();

localStorage.setItem('myCat', 'Tom');
localStorage.getItem('myCat');
localStorage.removeItem('myCat');
localStorage.clear();

IndexedDB

随着浏览器的功能不断增强，越来越多的网站开始考虑，将大量数据储存在客户端，这样可以减少从服务器获取数据，直接从本地获取数据。
现有的浏览器数据储存方案，都不适合储存大量数据：Cookie 的大小不超过4KB，且每次请求都会发送回服务器；LocalStorage 在 2.5MB 到 10MB 之间（各家浏览器不同），而且不提供搜索功能，不能建立自定义的索引。所以，需要一种新的解决方案，这就是 IndexedDB 诞生的背景。

IndexedDB 就是浏览器提供的本地数据库，它可以被网页脚本创建和操作。IndexedDB 允许储存大量数据，提供查找接口，还能建立索引。这些都是 LocalStorage 所不具备的。就数据库类型而言，IndexedDB 不属于关系型数据库（不支持 SQL 查询语句），更接近 NoSQL 数据库。
具体使用可参考浏览器数据库 IndexedDB 入门教程、MDN