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

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中移除项并返回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，而不是删除它(如果需要的话)。