理解挑战：页面重载与状态丢失
在 web 开发中，当一个页面被重新加载时，所有在内存中存储的 javascript 变量都会被重新初始化。对于一个依赖于 javascript 变量来维护状态的倒计时功能而言，这意味着每次页面刷新，倒计时都会从其初始设定值重新开始，无法保持之前的进度。例如，一个简单的库存计数器，如果其当前数量仅存储在 javascript 变量中，那么用户刷新页面后，计数器将不再显示刷新前的数量，而是回到默认值。
核心解决方案：使用 localStorage 进行状态持久化
为了解决页面重载导致状态丢失的问题，我们可以利用 Web Storage API 中的 localStorage。localStorage 提供了一种在浏览器中持久化存储键值对数据的方法，即使浏览器关闭再打开，数据依然存在，直到被显式清除。这使得它非常适合用来保存倒计时或类似组件的状态。
基本思路如下：
- 保存状态： 每当倒计时器的值发生变化时，将其当前值保存到 localStorage 中。
- 读取状态： 页面加载时，首先检查 localStorage 中是否存在之前保存的倒计时值。如果存在，则使用该值作为倒计时的起始值；如果不存在，则使用默认的初始值。
- 重置功能： 提供一个机制，允许用户清除 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>代码解析
-
setQty(qty) 函数：
- 这是倒计时的核心逻辑，它接收当前数量 qty 作为参数。
- qtySpan.innerHTML = qty;：将当前数量显示在页面上。
- if (qty == 0) return;：当数量减到 0 时，停止倒计时。
- 随机减少数量和随机延迟时间是为了模拟真实世界的动态变化。
- localStorage.setItem('saved_countdown', qty);：这是实现持久化的关键。 每当 qty 发生变化时，我们都会将其最新的值保存到 localStorage 中，键名为 'saved_countdown'。
- setTimeout(() => setQty(qty), msec);：递归调用 setQty，在指定的延迟后继续倒计时。
-
const defaultQty = localStorage.getItem('saved_countdown') ?? 57;：
- 这行代码在脚本加载时执行，用于确定倒计时的初始值。
- localStorage.getItem('saved_countdown') 尝试从 localStorage 中读取之前保存的值。
- ?? 57 是 Nullish coalescing operator（空值合并运算符）。如果 localStorage.getItem() 返回 null 或 undefined（表示没有保存过值），则 defaultQty 将被赋值为 57；否则，它将使用从 localStorage 中读取到的值。
-
重置按钮功能：
- resetBtn.addEventListener('click', () => { ... });：为重置按钮添加点击事件。
- localStorage.removeItem('saved_countdown');：当用户点击重置按钮时，从 localStorage 中删除之前保存的倒计时值。
- location.reload();：刷新页面。由于 localStorage 中的值已被删除，页面重新加载时 defaultQty 将会是 57，从而实现倒计时的重置。
-
setQty(defaultQty);：
- 在所有初始化工作完成后，调用 setQty 函数，使用 defaultQty 启动倒计时。
关键点与注意事项
- localStorage 的数据类型： localStorage 只能存储字符串。在我们的例子中，数量 qty 是数字，但在存储时 JavaScript 会自动将其转换为字符串，读取时再自动转换回来（或在需要时手动转换，例如使用 parseInt()）。
- 存储容量限制： localStorage 的存储容量通常为 5MB 左右，对于存储简单的倒计时值来说绰绰有余。
- 同步操作： localStorage 的读写操作是同步的，这意味着它们会阻塞主线程。对于存储少量数据，这通常不是问题，但如果需要存储大量数据或频繁操作，可能会影响页面性能。
- 安全性： localStorage 中的数据没有加密，也不受同源策略的严格保护（虽然不同源不能互相访问）。不应在 localStorage 中存储敏感信息。
- 用户体验： 提供一个明确的重置按钮对于用户来说非常重要，它让用户可以控制倒计时的状态。
总结
通过巧妙地利用 localStorage，我们可以轻松地实现 JavaScript 倒计时状态的持久化，从而在页面重载时保持其连续性。这种方法不仅适用于倒计时，还可以推广到其他需要跨页面刷新维护状态的场景，如用户偏好设置、购物车状态等。理解并掌握 localStorage 的使用，是构建更健壮、用户体验更好的 Web 应用的关键一步。
