如何在React Native应用重启后持久化倒计时变量？

你的核心问题在于当前倒计时依赖内存中的duration变量，应用重启后内存数据丢失，导致倒计时直接重置。而且用setInterval直接递减duration还可能因为页面休眠、定时器延迟等问题出现时间偏差。

正确的思路是：持久化存储倒计时的目标结束时间，每次页面加载时基于当前时间和目标时间重新计算剩余时长，而不是依赖内存中的临时状态。下面是具体实现方案：

步骤1：持久化存储目标结束时间 #

我们用localStorage来保存倒计时的结束时间戳，这样应用重启后数据不会丢失。初始化变量时，先尝试从本地存储读取，如果不存在或者已过期，再重新生成12小时后的时间并存储：

// 初始化变量
let eventTime;
const storedEventTime = localStorage.getItem('countdownEndTime');
const currentTime = moment().unix();

if (storedEventTime && parseInt(storedEventTime) > currentTime) {
  // 存在未过期的目标时间，直接复用
  eventTime = parseInt(storedEventTime);
} else {
  // 不存在或已过期，重新生成12小时后的时间并持久化
  eventTime = moment().add(12, 'h').unix();
  localStorage.setItem('countdownEndTime', eventTime.toString());
}

步骤2：修改倒计时逻辑，基于实时时间计算剩余时长 #

不再依赖内存中的duration，而是每次定时器触发时，重新计算当前时间和目标结束时间的差值。这样即使重启页面，也能基于实际时间差得到准确的剩余时长：

componentDidMount() {
  const interval = 1000;
  
  // 保存定时器实例，方便后续清除
  this.countdownInterval = setInterval(() => {
    const currentTime = moment().unix();
    const diffTime = eventTime - currentTime;
    
    if (diffTime <= 0) {
      // 倒计时结束，清除定时器并移除过期的本地存储
      clearInterval(this.countdownInterval);
      localStorage.removeItem('countdownEndTime');
      console.log('倒计时已结束');
      return;
    }
    
    // 计算剩余的时、分、秒
    const duration = moment.duration(diffTime * 1000, 'milliseconds');
    const h = duration.hours();
    const m = duration.minutes();
    const s = duration.seconds();
    
    console.log(h, m, s);
  }, interval);
}

// 组件卸载时务必清除定时器，避免内存泄漏
componentWillUnmount() {
  if (this.countdownInterval) {
    clearInterval(this.countdownInterval);
  }
}

方案优势说明 #

• 持久化可靠：localStorage会把目标结束时间存在用户浏览器中，应用重启、关闭再打开都能读取到之前的进度。
• 时间精准：每次都基于实时时间计算差值，避免了setInterval的延迟误差，也不会因为页面休眠导致倒计时停滞。
• 自动兼容过期场景：如果用户超过12小时后才打开应用，会自动生成新的12小时倒计时，无需额外处理。

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