赋予 localStorage 以生命：为小程序勾选框设置有效期

2023-12-23 11:19:37

前言

小程序的 localStorage 是一个强大的存储机制，可让我们跨会话持久保存数据。然而，有时我们需要对存储的数据施加限制，例如为勾选框设置有效期。本文将深入探讨如何使用 localStorage 来实现这一目标，为小程序开发人员提供一个简洁、高效的解决方案。

探索 localStorage 的奥秘

LocalStorage 本质上是一个键值存储，我们可以使用 setItem() 和 getItem() 方法来操作数据。但是，它缺乏设置数据有效期的内建特性。因此，我们需要采用一种巧妙的方法来模拟有效期。

为勾选框注入生命力

假设我们有一个勾选框，需要在 30 天内保持勾选状态。我们可以遵循以下步骤：

记录勾选时间戳： 在用户勾选时，将当前时间戳存储在 localStorage 中，键名可以是 checkbox-timestamp。
验证有效期： 当用户下次访问时，获取当前时间戳并与存储的时间戳进行比较。如果当前时间戳比存储的时间戳大 30 天，则勾选框应取消勾选；否则，保持勾选。
更新时间戳： 如果勾选框仍然选中，则更新存储的时间戳为当前时间戳。

将概念化为代码

const checkbox = document.querySelector('input[type=checkbox]');

// 用户勾选时
checkbox.addEventListener('change', () => {
  if (checkbox.checked) {
    localStorage.setItem('checkbox-timestamp', Date.now());
  }
});

// 用户访问时
const timestamp = localStorage.getItem('checkbox-timestamp');
if (timestamp) {
  const now = Date.now();
  const diff = (now - timestamp) / (1000 * 60 * 60 * 24); // 单位：天
  if (diff > 30) {
    checkbox.checked = false;
  } else {
    localStorage.setItem('checkbox-timestamp', now);
  }
}