【Web技术】Web存储API

Web存储API提供了一些机制，浏览器可以通过这些机制以比使用cookie更直观的方式存储密钥/值对。

概念和用法

Web存储中的两种机制如下：

• sessionStorage为每个给定的源维护一个单独的存储区域，该存储区域在页面会话期间可用（只要浏览器选项卡打开，包括页面重新加载和恢复）。
• localStorage也做同样的事情，但即使浏览器关闭并重新打开，它也会持续存在。

这些机制可通过Window.sessionStorage和Window.localStorage属性获得。调用其中一个将返回存储对象的实例，通过该实例可以设置、检索和删除数据项。会话存储和本地存储分别使用不同的存储对象作为每个源——它们分别起作用并受控制。

要了解使用API的可用存储量，以及超过存储限制时会发生什么，请参阅存储配额和驱逐(Storage quotas and eviction criteria.)标准。

Web存储中的sessionStorage和localStorage本质上都是同步的。这意味着，当数据被设置、检索或从这些存储机制中删除时，操作将同步执行，从而阻止其他JavaScript代码的执行，直到操作完成。这种同步行为可能会影响web应用程序的性能，尤其是在存储或检索大量数据的情况下。

开发人员在sessionStorage或localStorage上执行涉及大量数据或计算密集型任务的操作时应谨慎。优化代码并尽量减少同步操作非常重要，以防止阻塞用户界面并导致应用程序响应延迟。

异步替代方案，如IndexedDB，可能更适合于性能问题或处理较大数据集的情况。这些替代方案允许无阻塞操作，实现更流畅的用户体验和更好的web应用程序性能。

注意：如果用户禁用了第三方cookie，则拒绝从第三方IFrame访问Web存储。

确定第三方对存储的访问

每个源都有自己的存储--对于web存储和 shared storage都是如此。然而，第三方（即嵌入式）代码对共享存储的访问取决于其浏览上下文。来自另一个来源的第三方代码运行的上下文决定了第三方编码的存储访问权限。

一个方框图显示了一个名为publisher.com的顶级浏览上下文，其中嵌入了第三方内容

可以将第三方代码添加到另一个网站，方法是向其注入＜script＞元素，或者将＜iframe＞的源设置为包含第三方码的网站。用于集成第三方代码的方法决定了代码的浏览上下文。

• 如果您的第三方代码添加到另一个带有＜script＞元素的网站，您的代码将在嵌入程序的浏览上下文中执行。因此，当您调用Storage.setItem（）或SharedStorage.set（）时，键/值对将被写入嵌入程序的存储中。从浏览器的角度来看，当使用＜script＞标记时，第一方代码和第三方代码之间没有区别。
• 当您的第三方代码添加到<iframe>内的另一个网站时，<iframe>内的代码将使用<iframe]的浏览上下文的来源执行。如果<iframe>内部的代码调用Storage.setItem（），则数据将被写入<iframe>'s origin的本地或会话存储中。如果<iframe>代码调用SharedStorage.set（），则数据将被写入<iframe>'s origin的共享存储中。

Web存储接口

Storage

允许您设置、检索和删除特定域和存储类型（会话或本地）的数据。

Window

Web Storage API使用两个新属性（Window.sessionStorage和Window.localStorage）扩展了Window对象，这两个属性分别提供对当前域的会话和本地Storage对象的访问，还提供了一个存储事件处理程序，该处理程序在存储区域更改（例如，存储新项）时启动。

StorageEvent

当存储区域发生更改时，会在文档的Window对象上激发存储事件。

示例

为了说明一些典型的web存储使用情况，我们创建了一个简单的示例，富有想象力地称为web存储演示[Web Storage Demo]。登录页[ landing page]提供了可用于自定义颜色、字体和装饰图像的控件。当您选择不同的选项时，页面会立即更新；此外，您的选择存储在localStorage中，这样当您离开页面并稍后再次加载时，您的选项就会被记住。

此外，我们还提供了一个事件输出页面[event output page]——如果您在另一个选项卡中加载此页面，然后在登录页中对您的选择进行更改，您将看到在触发 StorageEvent i时输出的更新的存储信息。

Specifications

Specification
HTML Standard # dom-localstorage-dev
HTML Standard # dom-sessionstorage-dev

Browser compatibilityapi.Window.localStorage

Report problems with this compatibility data on GitHub

	desktop					mobile						server
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari on iOS	Samsung Internet	WebView Android	Deno
localStorage	4 Toggle history	12 Toggle history	3.5 Toggle history	10.5 Toggle history	4 Toggle history	18 Toggle history	4 Toggle history	11 Toggle history	3.2 Toggle history	1.0 Toggle history	37 Toggle history	1.16 footnote Toggle history

Legend

Tip: you can click/tap on a cell for more information.

Full support

Full support

 

See implementation notes.

api.Window.sessionStorage

Report problems with this compatibility data on GitHub

	desktop					mobile						server
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari on iOS	Samsung Internet	WebView Android	Deno
sessionStorage	4 Toggle history	12 Toggle history	2 Toggle history	10.5 Toggle history	4 Toggle history	18 Toggle history	4 Toggle history	11 Toggle history	3.2 Toggle history	1.0 Toggle history	37 Toggle history	1.10 Toggle history

Legend

Tip: you can click/tap on a cell for more information

私人浏览/隐身模式

私人窗口、匿名模式和类似名称的隐私浏览选项不存储历史记录和cookie等数据。在专用模式下，localStorage被视为sessionStorage。存储API仍然可用且功能齐全，但当浏览器或浏览器选项卡关闭时，存储在专用窗口中的所有数据都会被删除。

另请参阅

• Using the Web Storage API
• Browser storage quotas and eviction criteria