Web Storage API

Web Storage 中的两种机制如下：

• sessionStorage 为每个给定的源维护一个单独的存储区域，该区域在页面会话期间可用（只要浏览器标签页处于打开状态，包括页面重新加载和恢复）。
• localStorage 做同样的事情，但即使在浏览器关闭并重新打开后仍会保留。

这些机制可通过Window.sessionStorage和Window.localStorage属性访问。调用其中一个属性将返回一个Storage对象的实例，可以通过该实例设置、检索和删除数据项。每个源都使用不同的存储对象用于sessionStorage和localStorage - 它们的功能和控制方式是独立的。

要了解使用 API 可用的存储量以及超出存储限制时会发生什么情况，请参阅存储配额和驱逐标准。

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

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

对于性能至关重要或处理大型数据集的情况，异步替代方案（如IndexedDB）可能更合适。这些替代方案允许非阻塞操作，从而提供更流畅的用户体验以及更好的 Web 应用程序性能。

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

可以通过使用<script>元素注入第三方代码或将<iframe>的源设置为包含第三方代码的站点来将其添加到另一个站点。用于集成第三方代码的方法决定了代码的浏览上下文。

• 如果您的第三方代码使用<script>元素添加到另一个站点，则您的代码将在嵌入者的浏览上下文中执行。因此，当您调用Storage.setItem()或SharedStorage.set()时，键值对将写入嵌入者的存储。从浏览器的角度来看，当使用<script>标签时，第一方代码和第三方代码之间没有区别。
• 当您的第三方代码在<iframe>中添加到另一个站点时，<iframe>内的代码将在<iframe>的浏览上下文的源中执行。如果<iframe>内的代码调用Storage.setItem()，则数据将写入<iframe>源的本地或会话存储。如果<iframe>代码调用SharedStorage.set()，则数据将写入<iframe>源的共享存储。

Storage

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

Window

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

StorageEvent

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

为了说明一些典型的 Web 存储用法，我们创建了一个简单的示例，名为Web Storage 演示。该登录页面提供了一些控件，可用于自定义颜色、字体和装饰图像。当您选择不同的选项时，页面会立即更新；此外，您的选择会存储在localStorage中，因此当您离开页面然后稍后重新加载它时，您的选择会被记住。

此外，我们还提供了一个事件输出页面 - 如果您在另一个标签页中加载此页面，然后在登录页面中更改您的选择，您将看到更新的存储信息作为StorageEvent触发时输出。

私有窗口、隐身模式以及类似命名的隐私浏览选项不会像历史记录和 Cookie 那样存储数据。在私有模式下，localStorage被视为sessionStorage。存储 API 仍然可用且功能齐全，但私有窗口中存储的所有数据在浏览器或浏览器标签页关闭时都会被删除。

• 使用 Web Storage API
• 浏览器存储配额和驱逐标准