聊一聊常见的浏览器数据存储方案 _数据存储

大家好，Echa 。
今天来分享常见的浏览器数据存储方案：localStorage、sessionStorage、IndexedDB、Cookies 。
1. 概述现代浏览器中提供了多种存储机制，打开浏览器的控制台（mac 可以使用 Command + Option + J 快捷键，windows 可以使用 Control + Shift + J 快捷键）。选择 Application 选项卡，可以在 Storage中看到 Local Storage、Session Storage、IndexedDB、Web SQL、Cookies 等：

文章插图

那数据存储在浏览器中有什么使用场景呢？在以下情况下，将数据存储在浏览器中成为更可行的选择：

在浏览器存储中保存应用状态，比如保持用户偏好（用户特定的设置，例如亮模式或暗模式、字体大小等）；
创建离线工作的渐进式 Web 应用，除了初始下载和更新之外没有服务器端要求；
缓存静态应用资源，如 html、css、JS 和图像等；
保存上一个浏览会话中的数据，例如存储上一个会话中的购物车内容，待办事项列表中的项目，记住用户是否以前登录过等。

无论哪种方式，将这些信息保存在客户端可以减少额外且不必要的服务器调用，并帮助提供离线支持。不过，需要注意，由于实现差异，浏览器存储机制在不同浏览器中的行为可能会有所不同。除此之外，许多浏览器已删除对 Web SQL 的支持，建议将现有用法迁移到 IndexedDB 。
所以下面我们将介绍 Local Storage、Session Storage、IndexedDB、Cookies 的使用方式、使用场景以及它们之间的区别。
2. Web Storage（1）概述HTML5 引入了 Web Storage，这使得在浏览器中存储和检索数据变得更加容易。Web Storage API 为客户端浏览器提供了安全存储和轻松访问键值对的机制。Web Storage 提供了两个 API 来获取和设置纯字符串的键值对：

localStorage：用于存储持久数据，除非用户手动将其从浏览器中删除，否则数据将终身存储。即使用户关闭窗口或选项卡，它也不会过期；
sessionStorage：用于存储临时会话数据，页面重新加载后仍然存在，关闭浏览器选项卡时数据丢失。

（2）方法和属性Web Storage API 由 4 个方法 setItem()、getItem()、removeItem() 、clear()、key()和一个 length 属性组成，以 localStorage 为例：

setItem() ：用于存储数据，它有两个参数，即key和value 。使用形式：localStorage.setItem(key, value)；
getItem()：用于检索数据，它接受一个参数 key，即需要访问其值得键。使用形式：localStorage.getItem(key);
removeItem()：用于删除数据，它接受一个参数 key，即需要删除其值得键。使用形式：localStorage.removeItem(key);
clear() ：用于清除其中存储的所有数据，使用形式：localStorage.clear();
key()：该方法用于获取 localStorage 中数据的所有key，它接受一个数字作为参数，该数字可以是 localStorage 项的索引位置。

console.log(typeof window.localStorage) // Object// 存储数据localStorage.setItem("colorMode", "dark")localStorage.setItem("username", "zhangsan")localStorage.setItem("favColor", "green")console.log(localStorage.length) // 3// 检索数据console.log(localStorage.getItem("colorMode")) // dark// 移除数据localStorage.removeItem("colorMode")console.log(localStorage.length) // 2console.log(localStorage.getItem("colorMode")) // null// 检索键名window.localStorage.key(0); // favColor// 清空本地存储localStorage.clear()console.log(localStorage.length) // 0

localStorage 和 sessionStorage 都非常适合缓存非敏感应用数据。可以在需要存储少量简单值并不经常访问它们是使用它们。它们本质上都是同步的，并且会阻塞主 UI 线程，所以应该谨慎使用。
（3）存储事件我们可以在浏览器上监听 localStorage 和 sessionStorage 的存储变化。storage 事件在创建、删除或更新项目时触发。侦听器函数在事件中传递，具有以下属性：