客户端存储-web Storage

这是我参与8月更文挑战的第12天，活动详情查看：8月更文挑战

前言

Web Storage 最先是网页超文本应用技术工做组（WHATWG，Web Hypertext Application Technical Working Group）在 Web Applications 1.0 规范中提出的。这个规范中的草案最终成为了 HTML5 的一部分， 后来又独立成为本身的规范。Web Storage 的目的是解决经过客户端存储不须要频繁发送回服务器的数 据时使用 cookie 的问题。

Web Storage 规范最新的版本是第 2 版，这一版规范主要有两个目标：

• 提供在 cookie 以外的存储会话数据的途径；
• 提供跨会话持久化存储大量数据的机制。

Web Storage 的第 2 版定义了两个对象：localStorage 和 sessionStorage。localStorage 是 永久存储机制，sessionStorage 是跨会话的存储机制。这两种浏览器存储 API 提供了在浏览器中不 受页面刷新影响而存储数据的两种方式。2009 年以后全部主要供应商发布的浏览器版本在 window 对象 上支持 localStorage 和 sessionStorage。

注意 Web Storage 第 1 版曾使用过 globalStorage，不过目前 globalStorage 已废弃。

Storage

Storage 类型用于保存名/值对数据，直至存储空间上限（由浏览器决定）。Storage 的实例与其余 对象同样，但增长了如下方法。

• clear()：删除全部值；不在 Firefox 中实现。
• getItem(name)：取得给定 name 的值。
• key(index)：取得给定数值位置的名称。
• removeItem(name)：删除给定 name 的名/值对。
• setItem(name, value)：设置给定 name 的值。

getItem()、removeItem()和 setItem()方法能够直接或间接经过 Storage 对象调用。由于每 个数据项都做为属性存储在该对象上，因此可使用点或方括号操做符访问这些属性，经过一样的操做 来设置值，也可使用 delete 操做符删除属性。即使如此，一般仍是建议使用方法而非属性来执行这 些操做，以避免意外重写某个已存在的对象成员。

经过 length 属性能够肯定 Storage 对象中保存了多少名/值对。咱们没法肯定对象中全部数据占用 的空间大小，尽管 IE8 提供了 remainingSpace 属性，用于肯定还有多少存储空间（以字节计）可用。

注意 Storage 类型只能存储字符串。非字符串数据在存储以前会自动转换为字符串。 注意，这种转换不能在获取数据时撤销。

sessionStorage 对象

sessionStorage 对象只存储会话数据，这意味着数据只会存储到浏览器关闭。这跟浏览器关闭时 会消失的会话 cookie 相似。存储在 sessionStorage 中的数据不受页面刷新影响，能够在浏览器崩溃 并重启后恢复。（取决于浏览器，Firefox 和 WebKit 支持，IE 不支持。）

由于 sessionStorage 对象与服务器会话紧密相关，因此在运行本地文件时不能使用。存储在 sessionStorage 对象中的数据只能由最初存储数据的页面使用，在多页应用程序中的用处有限。

由于 sessionStorage 对象是 Storage 的实例，因此能够经过使用 setItem()方法或直接给属 性赋值给它添加数据

// 使用方法存储数据
sessionStorage.setItem("name", "Nicholas");
// 使用属性存储数据
sessionStorage.book = "Professional JavaScript";

// 使用方法取得数据
let name = sessionStorage.getItem("name");
// 使用属性取得数据
let book = sessionStorage.book;

// 使用 delete 删除值
delete sessionStorage.name;
// 使用方法删除值
sessionStorage.removeItem("book");
复制代码

localStorage 对象

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

因 为 localStorage 是 Storage 的实例，因此能够像使用 sessionStorage 同样使用 localStorage

// 使用方法存储数据
localStorage.setItem("name", "Nicholas");
// 使用属性存储数据
localStorage.book = "Professional JavaScript";
// 使用方法取得数据
let name = localStorage.getItem("name");
// 使用属性取得数据
let book = localStorage.book;
复制代码

两种存储方法的区别在于，存储在 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”页面。

---

---

以上就是本篇的所有内容了，很是感谢帅哥美女们能看到这里，若是这个文章写得还不错或者对你有一点点帮助，求点赞，求关注，求分享，固然有任何问题能够在评论讨论，我都会积极回答的，再次感谢😁