JS中sessionStorage实现计数器的妙用

2023-11-23 17:28:47

使用 SessionStorage 在浏览器中跟踪数据：一个简洁明了的分步指南

摘要

HTML5 的 SessionStorage 提供了一种在浏览器会话期间轻松存储和访问数据的强大方法。它与 localStorage 相似，但提供了独特的功能，使其成为跟踪会话特定数据的理想选择。在本文中，我们将深入探讨 SessionStorage 的特点，并逐步指导您使用它来创建自己的浏览器计数器。

SessionStorage 的特点

会话范围： SessionStorage 中的数据仅在当前浏览器选项卡或窗口中有效。关闭选项卡或窗口也会清除存储的数据。
跨选项卡隔离： SessionStorage 数据在不同选项卡或浏览器窗口之间不会共享，确保数据安全且与其他会话独立。
持久性： 尽管 SessionStorage 与会话相关联，但它仍然提供持久性。即使在浏览器关闭后，数据也会保留，直到选项卡或窗口被关闭。

创建浏览器计数器：一个分步指南

使用 SessionStorage 创建计数器非常简单，只需几个步骤：

创建 HTML 页面： 创建一个新的 HTML 页面，并添加一个按钮和一个显示计数的文本元素。
添加 JavaScript 脚本： 接下来，添加一个 JavaScript 脚本，其中包含 SessionStorage 处理逻辑。
创建 SessionStorage 对象： 在脚本中，使用 sessionStorage 创建一个 SessionStorage 对象。
读取初始计数： 使用 getItem() 方法从 SessionStorage 中读取当前计数（如果存在）。如果没有找到计数，则将其初始化为 0。
按钮点击事件： 添加一个事件处理程序，当用户点击按钮时，它会读取当前计数、将其增加 1，然后将其存储回 SessionStorage。
更新显示： 使用 innerText 属性将更新后的计数显示在文本元素中。

代码示例

<!DOCTYPE html>
<html>
<head>
  
</head>
<body>
  <h1>计数器</h1>
  <button id="btnIncrease">增加</button>
  <p id="txtCount">0</p>

  <script>
    // 获取元素
    var btnIncrease = document.getElementById("btnIncrease");
    var txtCount = document.getElementById("txtCount");

    // 创建 SessionStorage 对象
    var storage = sessionStorage;

    // 读取初始计数
    var count = parseInt(storage.getItem("count")) || 0;

    // 更新显示
    txtCount.innerText = count;

    // 按钮点击事件处理程序
    btnIncrease.onclick = function() {
      // 增加计数
      count++;

      // 将计数存储到 SessionStorage
      storage.setItem("count", count);

      // 更新显示
      txtCount.innerText = count;
    };
  </script>
</body>
</html>