前端本地化存储方案整理

前言

感谢大佬@方旭分享, 原文地址
本片笔记是大佬分享的一篇复刻，让自己对每种存储方案加深印象。

分案大纲

• 常用
  • Cookie
  • sessionStorage
  • localStorage
• 扩展
  • web SQL database
  • indexedDB(详细)

扩展

web SQL database

已被取代，主要有以下几个原因：

1. W3C 舍弃 Web SQL database 草案，而且是在2010年年底，规范不支持了，浏览器已经支持的就支持了，没有支持的也不打算支持，比如 IE 和 Firefox；
2. 为什么要舍弃？因为 Web SQL database 本质上是一个关系型数据库，后端可能熟悉，但是前端就有很多不熟悉了，虽然 SQL 的简单操作不难，但是也得需要学习。
3. SQL 熟悉后，真实操作中还得把你存储的东西，比如对象，转成 SQL 语句，也挺麻烦的。

indexedDB

来自 MDN 的解释： indexedDB 是一种低级 API，用于客户端存储大量结构化数据（包括，文件/blobs）。该 API 使用索引来实现对该数据的高性能搜索。虽然 Web Storage 对于存储较少量的数据很有用，但对于存储更大量的结构化数据来说，这种方法不太有用。IndexedDB 提供了一个解决方案。

所以， IndexedDB 是强大的，但对于简单的情况可能看起来太复杂了，所以要看你的业务场景来选择到底是用还是不用。
IndexedDB 是一个基于 JavaScript 的面向对象的数据库。IndexedDB允许你存储和检索用键索引的对象。

IndexedDB 鼓励使用的基本模式如下所示：

• 打开数据库并且开始一个事务。
• 创建一个 object store。
• 构建一个请求来执行一些数据库操作，像增加或提取数据等。
• 通过监听正确类型的 DOM 事件以等待操作完成。
• 在操作结果上进行一些操作（可以在 request 对象中找到）。

详细

IndexedDB.md

额外

cookie、localStorage、sessionStorage 区别

• 相同：在本地（浏览器端）存储数据；
• 不同：
  • localStorage、sessionStorage
    • localStorage 只要在相同的协议、相同的主机名、相同的端口下，就能读取/修改到同一份 localStorage 数据。
    • sessionStorage 比 localStorage更严苛一点，除了协议、主机名、端口外，还要求在同一窗口（浏览器的标签页）
    • localStorage 是永久存储，除非手动删除。
    • sessionStorage 当会话结束（当前页面关闭的时候，自动销毁）。
  • cookie 的数据会在每一次发送 http 请求的时候，同时发送給服务器，而 localStorage、sessionStorage 不会。