如何正确使用localStorage实现验证后Div保持解锁并定时锁定？

你的核心需求有两个：一是验证通过后刷新页面保持div解锁状态，二是设置过期时间，到期后刷新自动锁定。原代码仅实现了存储状态，但未在页面加载时读取状态，也缺少过期机制，下面是修正后的完整方案：

1. 完善存储逻辑：添加过期时间 #

在验证通过时，不仅存储解锁状态，还要记录当前时间加上你需要的过期时长（示例设置为1小时，即3600000毫秒）：

$(function() {
  $('#podt').click(function(event) {
    event.preventDefault();
    $.post('/inc/test_code_sms.php', $('#form1').serialize(), function(data) {
      alert(data);
      if (data === "Номер активирован") {
        const content = document.getElementById("content");
        content.style.display = "block";
        // 存储解锁状态与过期时间（当前时间 + 1小时）
        localStorage.setItem('contentUnlocked', '1');
        localStorage.setItem('unlockExpire', Date.now() + 3600000);
      }
    });
  });
});

2. 页面加载时自动验证状态 #

页面初始化阶段，读取localStorage中的状态和过期时间，判断是否仍在有效期内，再决定div的显示状态：

$(function() {
  // 页面加载时检查解锁状态与过期时间
  const isUnlocked = localStorage.getItem('contentUnlocked');
  const expireTime = localStorage.getItem('unlockExpire');
  
  if (isUnlocked === '1' && expireTime && Date.now() < expireTime) {
    // 状态有效，显示div
    document.getElementById("content").style.display = "block";
  } else {
    // 已过期或未解锁，隐藏div并清理无效存储
    document.getElementById("content").style.display = "none";
    localStorage.removeItem('contentUnlocked');
    localStorage.removeItem('unlockExpire');
  }

  // 原有的验证点击逻辑
  $('#podt').click(function(event) {
    event.preventDefault();
    $.post('/inc/test_code_sms.php', $('#form1').serialize(), function(data) {
      alert(data);
      if (data === "Номер активирован") {
        const content = document.getElementById("content");
        content.style.display = "block";
        localStorage.setItem('contentUnlocked', '1');
        localStorage.setItem('unlockExpire', Date.now() + 3600000); // 1小时过期，可自行调整时长
      }
    });
  });
});

关键说明 #

• 用Date.now()获取当前毫秒级时间戳，加上过期时长得到过期时间，每次页面加载时对比即可判断状态是否有效。
• 若状态过期或未解锁，及时清理localStorage中的无效数据，避免残留状态干扰后续逻辑。
• 过期时长可按需修改，比如30分钟就是1800000毫秒，直接替换数值即可。

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