sessionStorage：提供浏览会话数据的存储

sessionStorage是一个用于在单个浏览器选项卡中临时存储数据的便捷工具。

  • 我们将揭示它的优点和局限性，特别是它无法跨不同选项卡共享信息。
  • 最后，您将清楚地了解 sessionStorage 的角色，并在需要时发现在选项卡之间共享数据的替代方法。

背景上下文
想象一下您正在浏览一个购物网站并将商品添加到您的购物车。但是如果您关闭选项卡并稍后再回来会发生什么？传统上，网站依靠 cookie 来记住这些信息。 Cookie 就像网站留下的小笔记，但它们的大小和安全性可能受到限制。

Web 存储是网站在设备上存储信息的更强大的方式。这就像您的浏览器内有一个专用的迷你存储单元。这使得网站可以在本地保存数据，而不必仅仅依赖 cookie。

网络存储有两种主要类型：

  • sessionStorage： 将其视为单个浏览器选项卡中的临时记事本。它非常适合您仅在特定浏览会话期间需要的内容，例如购物车中的商品示例。一旦关闭选项卡，信息就会消失，就像扔掉记事本一样。
  • localStorage： 这就像浏览器中更永久的存储盒。即使您关闭选项卡或窗口后，此处保存的信息仍然存在，并且在您明确删除之前一直可用。它对于您想要在浏览会话中记住的事情非常有用，例如登录凭据或网站首选项。

在本文中，我们将重点关注 sessionStorage，这是一种临时存储选项，可在单个浏览器选项卡中方便地保存信息。

sessionStorage：浏览器的临时记事本
sessionStorage 是网络浏览器中的一项内置功能，允许网站在您的设备上本地存储数据，但有一点不同：与 cookie 不同，sessionStorage 中存储的数据是临时的，当您关闭浏览器选项卡时就会消失。将其视为记事本，用于记下当前浏览会话期间所需的内容，但以后不需要记住。

sessionStorage 的功能如下：

  • 单个选项卡内的数据持久性（包括页面重新加载）： sessionStorage 中保存的信息在浏览器选项卡的整个生命周期内持续存在。即使您刷新页面或导航到同一选项卡中的不同链接，数据仍然可以访问。这使得它对于以下任务很有用：
    • 以多页形式记住您的进度。
    • 跟踪网页上的选择或偏好。
    • 存储会话期间 JavaScript 函数使用的临时数据。
  • 选项卡关闭时数据过期： sessionStorage 和 localStorage 等其他存储选项之间的主要区别是数据持久性。关闭浏览器选项卡后，存储在 sessionStorage 中的该特定选项卡的所有数据都将被永久删除。这可确保您的浏览历史记录和临时首选项不会扰乱设备的存储空间。
  • 选项卡之间的 sessionStorage 隔离：每个浏览器选项卡都使用自己隔离的 sessionStorage 进行操作。其他选项卡无法访问存储在一个选项卡的 sessionStorage 中的数据，即使它们来自同一网站也是如此。这有助于维护隐私并防止浏览会话之间意外的数据共享。

使用sessionStorage
sessionStorage 提供了与存储的数据交互的方法：

  • setItem(key, value)：该方法用于存储键值对。这key是数据的唯一标识符，就像笔记上的标签一样。这value是您要存储的实际数据，可以是文本、数字，甚至是数组或对象（在后台转换为字符串）。
  • getItem(key)：要检索与特定键关联的数据，请使用getItem(key).此方法以字符串形式返回存储的值，或者null如果键不存在则返回。
  • removeItem(key)：如果要删除特定的数据，请使用removeItem(key).此方法删除与提供的键关联的键值对。
  • clear()：要清除当前选项卡的 sessionStorage 中存储的所有数据，请使用该clear()方法。这基本上会清除你的记事本，删除所有临时信息。

sessionStorage的局限性
sessionStorage 为 Web 开发人员提供了一个有价值的工具，但了解其关键限制至关重要：选项卡之间的数据隔离。与在所有选项卡中保存数据的 localStorage 不同，sessionStorage 为每个单独的浏览器选项卡创建单独的存储空间。这意味着您存储在一个选项卡的 sessionStorage 中的信息将无法被其他选项卡访问，即使它们来自同一网站。
这种隔离的存在有一个特定的原因：隔离的会话上下文。每个浏览器选项卡都在其自己的独立会话中运行。这可以确保：

  • 隐私：想象一下，您在一个选项卡中登录社交媒体帐户，并在另一个选项卡中浏览购物网站。存储在社交媒体选项卡的 sessionStorage 中的数据（例如您的登录信息）与购物选项卡保持隔离，从而防止意外的信息共享。
  • 安全性：如果恶意脚本成功渗透到您的一个选项卡，它将无法访问存储在其他选项卡的 sessionStorage 中的数据。这种划分有助于遏制潜在的安全风险。
  • 组织：将数据分开可以防止混乱。您不希望一个网站上的购物车商品与另一个选项卡中的不同购物会话混淆。

虽然这种隔离乍一看似乎是一个缺点，但它实际上是一项至关重要的安全和隐私功能。但是，如果您需要跨多个选项卡共享数据，则可以使用 localStorage 等替代 Web 存储解决方案或 Broadcast Channel API 等通信方法。

在浏览器选项卡之间共享数据的替代方案
虽然 sessionStorage 在单个选项卡中的临时数据管理方面表现出色，但如果您需要跨多个选项卡甚至浏览器会话保留信息怎么办？以下是跨表通信的一些替代方法：

1. localStorage：浏览器的持久存储盒
将 sessionStorage 想象为一个临时记事本，但 localStorage 就像浏览器中更永久的存储盒。即使关闭选项卡或窗口后，保存在 localStorage 中的数据仍然存在。它非常适合存储您想要在不同浏览会话中访问的信息，例如：

  • 您经常访问的网站的登录凭据。
  • 用户对网站布局或主题的偏好。
  • 最近查看的项目或搜索历史记录（如果用户需要）。

setItem(key, value)与 sessionStorage 不同，localStorage 使用、getItem(key)、removeItem(key)和等方法提供相同的存储和检索数据的功能clear()。但是，存储在 localStorage 中的数据仍然可用，直到用户或网站本身明确删除为止。

2. 广播通道 API 或自定义事件：在选项卡之间广播消息
如果您需要一种更动态的方式在选项卡之间共享数据，则可以使用广播频道 API 或自定义事件等选项。这些方法有利于消息广播，允许选项卡进行通信和交换信息。

  • 广播通道 API：这种较新的方法为选项卡提供了发送和接收消息的专用通道。想象一下多个收音机调谐到相同的频率 - 选项卡可以订阅特定频道并收听同一频道上其他选项卡广播的消息。
  • 自定义事件：这是一种更成熟的技术，选项卡可以调度其他选项卡可以侦听的自定义事件。可以将其想象为升起一个标志 - 选项卡会引发具有特定数据的自定义事件，并且其他选项卡可以配置为在“看到”此事件被引发时做出反应。

与 localStorage 相比，广播通道 API 和自定义事件为选项卡之间的实时数据交换提供了更大的灵活性。然而，与 localStorage 的简单键值存储相比，它们需要更多的开发工作来实现。

结论
sessionStorage 为 Web 开发人员提供了一个强大的工具，可在单个浏览器选项卡中提供临时数据存储。它非常适合诸如记住特定浏览会话期间的表单进度或用户选择之类的任务。

比较：

  • sessionStorage 在选项卡之间的隔离阻止了跨不同窗口的数据共享。了解这一限制是关键。
  • 对于跨选项卡和会话的长期数据持久性，localStorage 是一个可靠的选择。
  • 当选项卡之间需要实时通信时，广播通道 API 或自定义事件可提供更动态的解决方案。