前端存储

Tue, 01 Oct 2024 00:00:00 +0800

什么是前端存储

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

前端存储的作用

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

有哪些前端存储方案

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

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

先做一个简单对比：

下面我们详细介绍。

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（会话存储）。

前端存储 on Last Stand

前端存储

什么是前端存储

前端存储的作用

有哪些前端存储方案

Cookie

WebStorage