客户端状态持久化的挑战
在web开发中，许多交互式组件，如倒计时、购物车数量等，其状态通常存储在javascript变量中。然而，当用户刷新页面时，这些javascript变量会被重新初始化，导致组件状态丢失。对于一个正在进行的倒计时而言，这意味着每次页面刷新都会从头开始，这显然不是我们期望的行为。为了解决这个问题，我们需要一种机制来在客户端存储和检索数据，即使页面被刷新也能保持数据不变。
利用 localStorage 实现倒计时持久化
浏览器提供了多种客户端存储方案，其中 localStorage 是一个非常适合此场景的选择。localStorage 允许Web应用程序在用户的浏览器中存储键值对数据，这些数据在浏览器会话结束后仍然存在，直到被显式清除。
实现页面刷新不重置倒计时的核心思想是：
- 初始化时读取： 页面加载时，首先检查 localStorage 中是否存在之前保存的倒计时值。如果存在，则使用该值作为倒计时的起始值；如果不存在，则使用默认的初始值。
- 更新时存储： 在倒计时过程中，每当倒计时的数值发生变化时，都将最新的数值保存到 localStorage 中。
- 重置功能： 提供一个机制，允许用户手动重置倒计时，这通常意味着从 localStorage 中移除保存的值并刷新页面。
代码实现
下面是一个完整的示例代码，展示了如何结合 HTML 和 JavaScript 来实现一个持久化的随机减量倒计时。
HTML 结构
我们只需要一个 元素来显示倒计时数量，以及一个 button 元素来提供重置功能。
立即学习“Java免费学习笔记（深入）”；
JavaScript 逻辑
JavaScript 部分是实现持久化倒计时的关键。我们将定义一个 setQty 函数来处理倒计时的更新和存储，并在页面加载时初始化倒计时。
代码解析与注意事项
-
localStorage.getItem('saved_countdown') ?? 57;:
- localStorage.getItem('saved_countdown') 用于从 localStorage 中检索名为 'saved_countdown' 的值。如果该键不存在，它将返回 null。
- ?? (空值合并运算符) 是一个ES2020特性，它会在左侧操作数为 null 或 undefined 时返回右侧操作数。这意味着如果 localStorage 中没有保存的值，defaultQty 将被赋值为 57。
- 重要提示： localStorage 存储的所有值都是字符串。虽然在 innerHTML 中直接使用字符串通常没有问题，但在进行数值计算前，最好使用 parseInt() 或 Number() 将其转换为数字类型，例如 setQty(parseInt(defaultQty, 10));。
-
localStorage.setItem('saved_countdown', qty);:
- 这是实现持久化的核心。在 setQty 函数内部，每次 qty 值更新后，我们都会立即将其保存到 localStorage 中。这样，即使在 setTimeout 触发下一次更新之前用户刷新了页面，最新的 qty 值也已经被保存。
-
重置功能:
- resetBtn.addEventListener('click', ...) 监听重置按钮的点击事件。
- localStorage.removeItem('saved_countdown'); 从 localStorage 中删除保存的倒计时值。
- location.reload(); 刷新页面。由于 localStorage 中的值已被移除，页面重新加载时，倒计时将从 defaultQty（即 57）重新开始。
-
随机性:
- Math.floor((Math.random() * 3) + 1) 生成一个 1 到 3 之间的随机整数，作为每次减少的数量。
- Math.floor(((Math.random() * 15) + 15) * 1000) 生成一个 15 到 30 秒之间的随机延迟时间。这种随机性使得倒计时看起来更自然，模拟了库存或事件的随机波动。
-
浏览器兼容性:
- localStorage 在现代浏览器中普遍支持。
- 空值合并运算符 ?? 是ES2020特性，如果需要支持旧版浏览器，可以使用 defaultQty = localStorage.getItem('saved_countdown') !== null ? localStorage.getItem('saved_countdown') : 57; 这样的传统写法。
总结
通过巧妙地结合 localStorage 和递归的 setTimeout 函数，我们成功地创建了一个在页面刷新后依然能保持其状态的 JavaScript 倒计时。这种模式不仅适用于倒计时，也可以推广到任何需要在客户端持久化状态的场景，例如用户设置、购物车内容等。理解 localStorage 的工作原理及其在状态管理中的应用，是构建健壮和用户友好型Web应用的关键技能之一。
