如何在网页中添加用户输入日期功能替换today变量并刷新页面

要模拟任意日期并让页面刷新后保持对应状态，核心思路是把用户输入的日期持久化存储，页面加载时优先读取这个存储的日期而非真实当前日期，具体实现如下：

1. 添加日期输入控件 #

在页面合适位置插入日期输入框和操作按钮，方便用户输入和切换：

<div class="date-test-tool">
  <label>测试日期：</label>
  <input type="date" id="customTestDate">
  <button onclick="applyCustomDate()">应用测试日期</button>
  <button onclick="resetToRealDate()">恢复真实日期</button>
</div>

2. 编写日期逻辑处理脚本 #

在页面的脚本部分（或外部JS文件）加入以下代码，确保这段代码在你原有使用today变量的代码之前执行：

// 初始化today变量：优先读取存储的测试日期，无则用真实日期
let today;
const storedDate = localStorage.getItem('pageTestDate');
if (storedDate) {
  // 将存储的日期字符串转为Date对象
  today = new Date(storedDate);
} else {
  today = new Date();
}

// 应用自定义日期的函数
function applyCustomDate() {
  const inputVal = document.getElementById('customTestDate').value;
  if (!inputVal) {
    alert('请选择日期');
    return;
  }
  // 把日期存入本地存储
  localStorage.setItem('pageTestDate', inputVal);
  // 刷新页面生效
  window.location.reload();
}

// 恢复真实日期的函数
function resetToRealDate() {
  localStorage.removeItem('pageTestDate');
  window.location.reload();
}

关键细节说明 #

• 用localStorage存储日期是因为它能跨页面刷新保留数据，除非用户手动清除浏览器缓存或调用恢复按钮。
• 日期输入框的type="date"返回标准YYYY-MM-DD格式字符串，直接传给new Date()就能正确生成日期对象，无需额外格式转换。
• 必须保证日期初始化逻辑在原有使用today的代码之前执行，否则原有代码会先拿到真实日期，达不到测试效果。

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