前端存储

什么是前端存储 开门见山。前端存储就是通过前端技术来存储一段信息，然后在同源下的不同页面中都可以获取到已存储信息的一种策略。 前端存储的作用 方便网页的加载，避免了在发送请求收到响应前页面的空白期 可以在非强制性要求实时更新时减少向服务端的请求，加快渲染速度 在网络不佳或无网时仍有离线数据可以查看 有哪些前端存储方案 如图，一共有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（会话存储）。 ...