一文搞懂前端存储

什么是前端存储

开门见山。前端存储就是通过前端技术来存储一段信息，然后在同源下的不同页面中都可以获取到已存储信息的一种策略。

前端存储的作用

• 方便网页的加载，避免了在发送请求收到响应前页面的空白期
• 可以在非强制性要求实时更新时减少向服务端的请求，加快渲染速度
• 在网络不佳或无网时仍有离线数据可以查看

有哪些前端存储方案

如图，一共有5种前端存储方案。大致可以分为3类：

• Cookie
• WebStorage：LocalStorage、SessionStorage
• 数据库存储：IndexedDB、WebSQL

先做一个简单对比：

下面我们详细介绍。

Cookie

Cookie 的工作流程：

Cookie 的构成：

域、路径、失效时间和安全性都是服务器给浏览器的指示，它们不会随着请求发送给服务器，发送给服务器的只有名称与值的键值对。

Cookie 的生命周期：

• 如果设定了 Cookie 的过期时间，那么 Cookie 会在到期时自动失效
• 如果没有设定过期时间，那么 Cookie 就是 session 级别的，即浏览器关闭时 Cookie 自动消失

Cookie 的优缺点：

优点：

• 可以控制过期时间，不会永久有效，有一定的安全保障
• 可进行扩展，可跨域共享
• 通过加密与安全传输技术，可以减少 Cookie 被破解的可能性
• 有较高的兼容性

缺点：

• 存储大小最多4KB
• 存储数量根据浏览器或浏览器版本的不同而不同，并且每个域最多20条
• 请求头上的数据容易被拦截攻击
• 存储的数据只能是字符串类型

操作 Cookie：

// 设置 Cookie
// Cookie 值必须是字符串类型，并且不支持分号、逗号以及空格，
// 所以有时需要先使用 encodeURIComponent() 进行编码，或者使用 JSON.stringify() 进行序列化
document.cookie = '键1=值1;键2=值2;键n=值n';

// 读取 Cookie
// 有时需要使用 decodeURIComponent() 或者 JSON.parse()
document.cookie

// 修改 Cookie
// 如果键不存在，就新增；否则就修改
document.cookie = '已经存储过的键=新值';

// 删除 Cookie
document.cookie = '要删除的键=任意值;max-age=0';

WebStorage

WebStorage 是 HTML5 新加的，WebStorage（Web 存储） 分为 LocalStorage（本地存储） 和 SessionStorage（会话存储）。

WebStorage 的优势：

• 解决了 Cookie 的一些限制，同时存储一些需要严格控制在客户端且不需要发送给服务器的数据
• 提供了除 Cookie 之外的另一种存储会话的途径
• 提供了一种大容量存储空间来跨会话存储数据的途径

比较一下 LocalStorage 和 SessionStorage 的区别：

WebStorage 跟 Cookie 相比：

IndexedDB

IndexedDB 是浏览器提供的本地数据库，是 HTML5 新加的，允许存储大量数据，提供查找接口，还能建立索引。这些都是 WebStorage 不具备的。就数据库而言，IndexedDB 不属于关系型数据库（不支持 SQL 查询语句），接近于 NoSQL 数据库，以键值对的形式进行存储，可以快速进行读取操作，非常适合 Web 场景，同时使用 JS 进行操作会很方便。

WebSQL

WebSQL 是在浏览器端运行的轻量级数据库，WebSQL 类似于 SQLite，更像是关系型数据库，使用 SQL 查询数据。注意，这种本地数据存储方案已经被废弃。

最后

如果文中有错误或者不足之处，欢迎大家在评论区指正。

你的点赞是对我莫大的鼓励！感谢阅读~