javascript基础学习系列三百八十九：localStorage对象

在修订的 HTML5 规范里，localStorage 对象取代了 globalStorage，作为在客户端持久存储 数据的机制。要访问同一个 localStorage 对象，页面必须来自同一个域(子域不可以)、在相同的端 口上使用相同的协议。

localStorage.setItem("name", "Nicholas"); 26

因为 localStorage 是 Storage 的实例，所以可以像使用 sessionStorage 一样使用 localStorage。比如下面这几个例子:

// 使用方法存储数据 // 使用属性存储数据
localStorage.book = "Professional JavaScript";
 let book = localStorage.book;
// 使用方法取得数据
let name = localStorage.getItem("name");
// 使用属性取得数据

两种存储方法的区别在于，存储在 localStorage 中的数据会保留到通过 JavaScript 删除或者用户 清除浏览器缓存。localStorage 数据不受页面刷新影响，也不会因关闭窗口、标签页或重新启动浏览 器而丢失。

存储事件

每当 Storage 对象发生变化时，都会在文档上触发 storage 事件。使用属性或 setItem()设置 值、使用 delete 或 removeItem()删除值，以及每次调用 clear()时都会触发这个事件。这个事件的 事件对象有如下 4 个属性。
 domain:存储变化对应的域。
 key:被设置或删除的键。
 newValue:键被设置的新值，若键被删除则为 null。
 oldValue:键变化之前的值。
可以使用如下代码监听 storage 事件:

window.addEventListener("storage",
        (event) => alert('Storage changed for ${event.domain}'));

对于 sessionStorage 和 localStorage 上的任何更改都会触发 storage 事件，但 storage 事 件不会区分这两者。

限制

与其他客户端数据存储方案一样，Web Storage 也有限制。具体的限制取决于特定的浏览器。一般 来说，客户端数据的大小限制是按照每个源(协议、域和端口)来设置的，因此每个源有固定大小的数 据存储空间。分析存储数据的页面的源可以加强这一限制。
不同浏览器给 localStorage 和 sessionStorage 设置了不同的空间限制，但大多数会限制为每 个源 5MB。关于每种媒介的新配额限制信息表，可以参考 web.dev 网站上的文章“Storage for the Web”。
要了解关于 Web Storage 限制的更多信息，可以参考 dev-test.nemikor 网站的“Web Storage Support Test”页面。

IndexedDB

Indexed Database API 简称 IndexedDB，是浏览器中存储结构化数据的一个方案。IndexedDB 用于代 替目前已废弃的 Web SQL Database API。IndexedDB 背后的思想是创造一套 API，方便 JavaScript 对象的 存储和获取，同时也支持查询和搜索。
IndexedDB 的设计几乎完全是异步的。为此，大多数操作以请求的形式执行，这些请求会异步执行， 产生成功的结果或错误。绝大多数 IndexedDB 操作要求添加 onerror 和 onsuccess 事件处理程序来确 定输出。
2017 年，新发布的主流浏览器(Chrome、Firefox、Opera、Safari)完全支持 IndexedDB。IE10/11 和 Edge 浏览器部分支持 IndexedDB。