使用 localStorage 实现页面重载时倒计时状态的持久化

理解挑战：页面重载与状态丢失

在 web 开发中，当一个页面被重新加载时，所有在内存中存储的 javascript 变量都会被重新初始化。对于一个依赖于 javascript 变量来维护状态的倒计时功能而言，这意味着每次页面刷新，倒计时都会从其初始设定值重新开始，无法保持之前的进度。例如，一个简单的库存计数器，如果其当前数量仅存储在 javascript 变量中，那么用户刷新页面后，计数器将不再显示刷新前的数量，而是回到默认值。

核心解决方案：使用 localStorage 进行状态持久化

为了解决页面重载导致状态丢失的问题，我们可以利用 Web Storage API 中的 localStorage。localStorage 提供了一种在浏览器中持久化存储键值对数据的方法，即使浏览器关闭再打开，数据依然存在，直到被显式清除。这使得它非常适合用来保存倒计时或类似组件的状态。

基本思路如下：

1. 保存状态： 每当倒计时器的值发生变化时，将其当前值保存到 localStorage 中。
2. 读取状态： 页面加载时，首先检查 localStorage 中是否存在之前保存的倒计时值。如果存在，则使用该值作为倒计时的起始值；如果不存在，则使用默认的初始值。
3. 重置功能： 提供一个机制，允许用户清除 localStorage 中保存的倒计时值，以便重新开始倒计时。

代码实现与解析

下面我们将通过一个具体的库存倒计时示例，演示如何结合 localStorage 实现状态持久化。

HTML 结构

首先，我们需要一个 HTML 元素来显示倒计时，并可以添加一个按钮来重置倒计时。

<span class="qty" id="qty"></span>
<button id="reset">重置倒计时</button>

JavaScript 逻辑

核心的 JavaScript 逻辑将包含倒计时函数、localStorage 的读写操作以及重置功能。

<script>
    // setQty 函数：负责更新显示、保存状态和调度下一次更新
    const setQty = (qty) => {
        // 更新页面上显示的数量
        qtySpan.innerHTML = qty;

        // 如果数量为0，则停止倒计时
        if (qty == 0) return;

        // 随机生成减少的数量（1到3之间）
        let parts = Math.floor((Math.random() * 3) + 1);
        // 确保减少的数量不会超过当前数量
        if (parts > qty) parts = qty;

        // 随机生成下一次更新的延迟时间（15到30秒之间，转换为毫秒）
        const msec =  Math.floor(((Math.random() * 15) + 15) * 1000);
        // 更新数量
        qty -= parts;

        // 关键步骤：将更新后的数量保存到 localStorage
        // 键名为 'saved_countdown'，值为当前 qty
        localStorage.setItem('saved_countdown', qty);

        // 使用 setTimeout 调度下一次 setQty 调用，形成递归倒计时
        setTimeout(() => setQty(qty), msec);
    }

    // 在页面加载时，获取或设置初始倒计时值
    // 尝试从 localStorage 中获取 'saved_countdown' 的值
    // 如果不存在 (null 或 undefined)，则使用默认值 57
    const defaultQty = localStorage.getItem('saved_countdown') ?? 57;

    // 获取页面元素引用
    const qtySpan = document.getElementById('qty');
    const resetBtn = document.getElementById('reset');

    // 为重置按钮添加点击事件监听器
    resetBtn.addEventListener('click', () => {
        // 从 localStorage 中移除保存的倒计时值
        localStorage.removeItem('saved_countdown');
        // 刷新页面，使倒计时从默认值重新开始
        location.reload();
    });

    // 页面加载后，使用获取到的（或默认的）数量启动倒计时
    setQty(defaultQty);
</script>

代码解析

1. setQty(qty) 函数：

   

   ViiTor实时翻译

   AI实时多语言翻译专家！强大的语音识别、AR翻译功能。

   116

   查看详情
   • 这是倒计时的核心逻辑，它接收当前数量 qty 作为参数。
   • qtySpan.innerHTML = qty;：将当前数量显示在页面上。
   • if (qty == 0) return;：当数量减到 0 时，停止倒计时。
   • 随机减少数量和随机延迟时间是为了模拟真实世界的动态变化。
   • localStorage.setItem('saved_countdown', qty);：这是实现持久化的关键。 每当 qty 发生变化时，我们都会将其最新的值保存到 localStorage 中，键名为 'saved_countdown'。
   • setTimeout(() => setQty(qty), msec);：递归调用 setQty，在指定的延迟后继续倒计时。

2. const defaultQty = localStorage.getItem('saved_countdown') ?? 57;：

   • 这行代码在脚本加载时执行，用于确定倒计时的初始值。
   • localStorage.getItem('saved_countdown') 尝试从 localStorage 中读取之前保存的值。
   • ?? 57 是 Nullish coalescing operator（空值合并运算符）。如果 localStorage.getItem() 返回 null 或 undefined（表示没有保存过值），则 defaultQty 将被赋值为 57；否则，它将使用从 localStorage 中读取到的值。

3. 重置按钮功能：

   • resetBtn.addEventListener('click', () => { ... });：为重置按钮添加点击事件。
   • localStorage.removeItem('saved_countdown');：当用户点击重置按钮时，从 localStorage 中删除之前保存的倒计时值。
   • location.reload();：刷新页面。由于 localStorage 中的值已被删除，页面重新加载时 defaultQty 将会是 57，从而实现倒计时的重置。

4. setQty(defaultQty);：

   • 在所有初始化工作完成后，调用 setQty 函数，使用 defaultQty 启动倒计时。

关键点与注意事项

• localStorage 的数据类型： localStorage 只能存储字符串。在我们的例子中，数量 qty 是数字，但在存储时 JavaScript 会自动将其转换为字符串，读取时再自动转换回来（或在需要时手动转换，例如使用 parseInt()）。
• 存储容量限制： localStorage 的存储容量通常为 5MB 左右，对于存储简单的倒计时值来说绰绰有余。
• 同步操作： localStorage 的读写操作是同步的，这意味着它们会阻塞主线程。对于存储少量数据，这通常不是问题，但如果需要存储大量数据或频繁操作，可能会影响页面性能。
• 安全性： localStorage 中的数据没有加密，也不受同源策略的严格保护（虽然不同源不能互相访问）。不应在 localStorage 中存储敏感信息。
• 用户体验： 提供一个明确的重置按钮对于用户来说非常重要，它让用户可以控制倒计时的状态。

总结

通过巧妙地利用 localStorage，我们可以轻松地实现 JavaScript 倒计时状态的持久化，从而在页面重载时保持其连续性。这种方法不仅适用于倒计时，还可以推广到其他需要跨页面刷新维护状态的场景，如用户偏好设置、购物车状态等。理解并掌握 localStorage 的使用，是构建更健壮、用户体验更好的 Web 应用的关键一步。

以上就是使用 localStorage 实现页面重载时倒计时状态的持久化的详细内容，更多请关注php中文网其它相关文章！