在特定时间重置本地存储变量

Question

如何重置 localStorage 变量，它是一个 boolean 变量，用于跟踪用户当天是否完成了某项操作。例如，当时间到达 8 am local time 时，它会将 boolean 重置为 false 以表明该操作尚未完成。

如果用户当天完成了操作，localStorage 变量将设置为 true，我们将倒计时显示为 8 am。

这是我检查当前时间和 8 am 前时间的方法。

const setActionCompleted = () => {
    var hasCompleted = true;
    localStorage.setItem("action-completed-today", JSON.stringify(hasCompleted));
}

const twoDigits = (number) => {
    return (number < 10 ? '0' : '') + number;
}

const countDown = () => {
    var reset = new Date();
    var now = new Date();
    reset.setHours(8, 0, 0);
    if(now > reset){
        reset.setDate(reset.getDate() + 1);
    }

    var timeToReset = ((reset - now) / 1000);

    var hours = ~~(timeToReset / 60 / 60) % 60;
    var minutes = ~~(timeToReset / 60) % 60;
    var seconds = ~~timeToReset % 60;

    return `${twoDigits(hours)}:${twoDigits(minutes)}:${twoDigits(seconds)}`;
}

const intervalId = setInterval(() => {
  console.log(countDown());
}, 1000);

// clear interval after 10 seconds so its not running indefinitely
setTimeout(() => {clearInterval(intervalId)}, 10000);

Answer 1

这里有几个不同的选项。您可以定期使项目过期，然后执行 localStorage.removeItem()，然后检查布尔值是否 localStorage.getItem() 找到符合您条件的项目，而不是将关联值更改为 false。为此，您需要围绕 localStorage.setItem 创建一个自定义包装器，以便它可以接受第三个过期时间道具，例如：

function setWithExpiry(key, value, interval) {
  const now = new Date();
  const item = {
    value: value,
    expiry: now.getTime() + interval,
  };
  localStorage.setItem(key, JSON.stringify(item));
};

然后当你从 localStorage 获取项目时，如果当前时间超过了项目的到期时间，让它从 localStorage 中按键删除项目并且 return null。

function getWithExpiry(key) {
  const itemStr = localStorage.getItem(key)
  if(!itemStr) {
    return null;
  }
  const item = JSON.parse(itemStr);
  const now = new Date();
  if (now.getTime() > item.expiry) {
    localStorage.removeItem(key);
    return null;
  }
  return item.value;
}

理论上，您可以在发现它是否已过期时将其重置为 false，而不是删除它，如果您愿意的话。

在特定时间重置本地存储变量

Reset localstorage variable at specific time

javascript

datetime

local-storage