JavaScript倒计时持久化：避免页面刷新重置

客户端状态持久化的挑战

在web开发中，许多交互式组件，如倒计时、购物车数量等，其状态通常存储在javascript变量中。然而，当用户刷新页面时，这些javascript变量会被重新初始化，导致组件状态丢失。对于一个正在进行的倒计时而言，这意味着每次页面刷新都会从头开始，这显然不是我们期望的行为。为了解决这个问题，我们需要一种机制来在客户端存储和检索数据，即使页面被刷新也能保持数据不变。

利用 localStorage 实现倒计时持久化

浏览器提供了多种客户端存储方案，其中 localStorage 是一个非常适合此场景的选择。localStorage 允许Web应用程序在用户的浏览器中存储键值对数据，这些数据在浏览器会话结束后仍然存在，直到被显式清除。

实现页面刷新不重置倒计时的核心思想是：

1. 初始化时读取： 页面加载时，首先检查 localStorage 中是否存在之前保存的倒计时值。如果存在，则使用该值作为倒计时的起始值；如果不存在，则使用默认的初始值。
2. 更新时存储： 在倒计时过程中，每当倒计时的数值发生变化时，都将最新的数值保存到 localStorage 中。
3. 重置功能： 提供一个机制，允许用户手动重置倒计时，这通常意味着从 localStorage 中移除保存的值并刷新页面。

代码实现

下面是一个完整的示例代码，展示了如何结合 HTML 和 JavaScript 来实现一个持久化的随机减量倒计时。

HTML 结构

我们只需要一个 <span> 元素来显示倒计时数量，以及一个 button 元素来提供重置功能。

立即学习“Java免费学习笔记（深入）”；

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

JavaScript 逻辑

JavaScript 部分是实现持久化倒计时的关键。我们将定义一个 setQty 函数来处理倒计时的更新和存储，并在页面加载时初始化倒计时。

<script>
    /**
     * 更新倒计时数量并将其保存到 localStorage
     * @param {number} qty 当前的倒计时数量
     */
    const setQty = (qty) => {
        // 更新页面上显示的数量
        qtySpan.innerHTML = qty;

        // 如果数量为0，则停止倒计时
        if (qty === 0) {
            // 倒计时结束时可以选择移除 localStorage 中的值，或保持0
            // localStorage.removeItem('saved_countdown');
            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
        localStorage.setItem('saved_countdown', qty);

        // 使用 setTimeout 在指定延迟后递归调用 setQty
        setTimeout(() => setQty(qty), msec);
    };

    // 从 localStorage 获取保存的倒计时值，如果不存在则使用默认值 57
    // ?? 操作符在左侧为 null 或 undefined 时返回右侧的值
    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(parseInt(defaultQty, 10)); // 确保传入的是数字类型
</script>

代码解析与注意事项

1. localStorage.getItem('saved_countdown') ?? 57;:

   

   降重鸟

   要想效果好，就用降重鸟。AI改写智能降低AIGC率和重复率。

   113

   查看详情
   • localStorage.getItem('saved_countdown') 用于从 localStorage 中检索名为 'saved_countdown' 的值。如果该键不存在，它将返回 null。
   • ?? (空值合并运算符) 是一个ES2020特性，它会在左侧操作数为 null 或 undefined 时返回右侧操作数。这意味着如果 localStorage 中没有保存的值，defaultQty 将被赋值为 57。
   • 重要提示： localStorage 存储的所有值都是字符串。虽然在 innerHTML 中直接使用字符串通常没有问题，但在进行数值计算前，最好使用 parseInt() 或 Number() 将其转换为数字类型，例如 setQty(parseInt(defaultQty, 10));。

2. localStorage.setItem('saved_countdown', qty);:

   • 这是实现持久化的核心。在 setQty 函数内部，每次 qty 值更新后，我们都会立即将其保存到 localStorage 中。这样，即使在 setTimeout 触发下一次更新之前用户刷新了页面，最新的 qty 值也已经被保存。

3. 重置功能:

   • resetBtn.addEventListener('click', ...) 监听重置按钮的点击事件。
   • localStorage.removeItem('saved_countdown'); 从 localStorage 中删除保存的倒计时值。
   • location.reload(); 刷新页面。由于 localStorage 中的值已被移除，页面重新加载时，倒计时将从 defaultQty（即 57）重新开始。

4. 随机性:

   • Math.floor((Math.random() * 3) + 1) 生成一个 1 到 3 之间的随机整数，作为每次减少的数量。
   • Math.floor(((Math.random() * 15) + 15) * 1000) 生成一个 15 到 30 秒之间的随机延迟时间。这种随机性使得倒计时看起来更自然，模拟了库存或事件的随机波动。

5. 浏览器兼容性:

   • localStorage 在现代浏览器中普遍支持。
   • 空值合并运算符 ?? 是ES2020特性，如果需要支持旧版浏览器，可以使用 defaultQty = localStorage.getItem('saved_countdown') !== null ? localStorage.getItem('saved_countdown') : 57; 这样的传统写法。

总结

通过巧妙地结合 localStorage 和递归的 setTimeout 函数，我们成功地创建了一个在页面刷新后依然能保持其状态的 JavaScript 倒计时。这种模式不仅适用于倒计时，也可以推广到任何需要在客户端持久化状态的场景，例如用户设置、购物车内容等。理解 localStorage 的工作原理及其在状态管理中的应用，是构建健壮和用户友好型Web应用的关键技能之一。

以上就是JavaScript倒计时持久化：避免页面刷新重置的详细内容，更多请关注php中文网其它相关文章！