React应用中localStorage的hasGuessed无法每日自动重置问题求助

核心思路是不依赖页面持续运行的定时器，而是通过在localStorage中同时存储hasGuessed的值和对应的日期，每次页面加载时主动判断当前日期是否与存储日期一致，不一致则自动重置为false。同时保留定时器处理页面保持打开到午夜的实时重置场景。

完整实现代码 #

import { useState, useEffect } from 'react';

// 辅助函数：获取本地日期的YYYY-MM-DD格式字符串
const getLocalTodayString = () => {
  const date = new Date();
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, '0');
  const day = String(date.getDate()).padStart(2, '0');
  return `${year}-${month}-${day}`;
};

// 在Context组件内的逻辑
const [hasGuessed, setHasGuessed] = useState(() => {
  const storedData = localStorage.getItem("guessData");
  if (storedData) {
    const { value, date } = JSON.parse(storedData);
    const today = getLocalTodayString();
    // 如果存储的日期不是今日，强制重置为false
    if (date !== today) {
      return false;
    }
    return value;
  }
  // 无存储数据时默认false
  return false;
});

// 页面加载时设置午夜重置定时器（处理页面持续打开的情况）
useEffect(() => {
  const now = new Date();
  // 计算今日午夜的时间戳
  const midnight = new Date(now.getFullYear(), now.getMonth(), now.getDate() + 1, 0, 0, 0);
  const timeUntilMidnight = midnight - now;

  const timer = setTimeout(() => {
    setHasGuessed(false);
  }, timeUntilMidnight);

  return () => clearTimeout(timer);
}, []);

// 每当hasGuessed变化时，同步存储值和今日日期到localStorage
useEffect(() => {
  const today = getLocalTodayString();
  localStorage.setItem("guessData", JSON.stringify({
    value: hasGuessed,
    date: today
  }));
}, [hasGuessed]);

关键改进点 #

1. 存储结构升级：从单独存hasGuessed布尔值，改为存储包含value（布尔值）和date（当日日期）的对象，让页面加载时能判断是否跨天。
2. 初始化逻辑增强：组件初始化时主动校验存储日期，只要跨天就自动重置hasGuessed为false，彻底解决页面关闭后次日打开不重置的问题。
3. 保留定时器：处理用户保持页面打开到午夜的场景，确保此时能实时重置状态，无需等待页面刷新。
4. 时区兼容：使用本地日期而非UTC日期，避免不同时区用户出现重置时间偏差的问题。

内容的提问来源于stack exchange，提问作者user29783777