Javascipt之客户端存储Storage

前言

Web Storage 最早是网页超文本应用技术工作组(WHATWG,Web Hypertext Application Technical

Working Group)在 Web Applications 1.0 规范中提出的。这个规范中的草案最终成为了 HTML5 的一部分,

后来又独立成为自己的规范。Web Storage 的目的是解决通过客户端存储不需要频繁发送回服务器的数

据时使用 cookie 的问题。

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

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

Web Storage 的第 2 版定义了两个对象:localStoragesessionStoragelocalStorage

永久存储机制,sessionStorage 是跨会话的存储机制。这两种浏览器存储 API 提供了在浏览器中不

受页面刷新影响而存储数据的两种方式。2009 年之后所有主要供应商发布的浏览器版本在 window 对象

上支持 localStoragesessionStorage

==注意 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 对象

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 对象只存储会话数据,这意味着数据只会存储到浏览器关闭。这跟浏览器关闭时

会消失的会话 cookie 类似。存储在 sessionStorage 中的数据不受页面刷新影响,可以在浏览器崩溃

并重启后恢复。(取决于浏览器,Firefox 和 WebKit 支持,IE 不支持。)

因为 sessionStorage 对象与服务器会话紧密相关,所以在运行本地文件时不能使用。存储在

sessionStorage 对象中的数据只能由最初存储数据的页面使用,在多页应用程序中的用处有限。

因为 sessionStorage 对象是 Storage 的实例,所以可以通过使用 setItem()方法或直接给属

性赋值给它添加数据

代码语言:js
复制
// 使用方法存储数据
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 对象,页面必须来自同一个域(子域不可以)、在相同的端

口上使用相同的协议。

因 为 localStorageStorage 的实例,所以可以像使用 sessionStorage 一样使用

localStorage

代码语言:js
复制
// 使用方法存储数据
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 事件:

代码语言:js
复制
window.addEventListener("storage",
(event) => alert('Storage changed for ${event.domain}'));

对于 sessionStoragelocalStorage 上的任何更改都会触发 storage 事件,但 storage

件不会区分这两者。

限制

与其他客户端数据存储方案一样,Web Storage 也有限制。具体的限制取决于特定的浏览器。一般

来说,客户端数据的大小限制是按照每个源(协议、域和端口)来设置的,因此每个源有固定大小的数

据存储空间。分析存储数据的页面的源可以加强这一限制。

不同浏览器给 localStoragesessionStorage 设置了不同的空间限制,但大多数会限制为每

个源 5MB。关于每种媒介的新配额限制信息表,可以参考 web.dev 网站上的文章“Storage for the Web”。

要了解关于 Web Storage 限制的更多信息,可以参考 dev-test.nemikor 网站的“Web Storage Support

Test”页面。