使用window.history.go(-1)返回后日期输入框值为空的原因及解决

原因分析 #

这种现象是浏览器**往返缓存（Back-Forward Cache，简称BF Cache）**导致的：

• 点击返回按钮时，浏览器不会重新加载第一页，而是直接从BF Cache中恢复之前页面的快照，这也是视觉上日期能保留的核心原因。
• DOMContentLoaded事件仅在页面首次从服务器/磁盘缓存加载时触发一次，从BF Cache恢复页面时不会再次触发。你看到的空值其实是页面首次加载时的打印结果，返回后这段代码根本没执行；而控制台直接查看元素的value属性时，浏览器已经从缓存同步了状态，所以能看到正确值。
• 部分浏览器在BF Cache恢复瞬间，JS访问DOM的value属性可能存在短暂延迟，导致即时获取为空，但视觉渲染已经完成。

解决方法 #

用pageshow事件替代或补充DOMContentLoaded，这个事件会在页面首次加载、从BF Cache恢复时都触发：

window.addEventListener('pageshow', function(e) {
  const dateFrom = document.getElementById('dateFrom');
  console.log(dateFrom.value); // 此时能拿到正确的日期值
  // 可在此添加你的业务处理逻辑
});

如果需要兼容更多场景，也可以同时监听两个事件，确保首次加载和缓存恢复时都能正确获取值：

function handleDateValue() {
  const dateFrom = document.getElementById('dateFrom');
  console.log(dateFrom.value);
  // 业务逻辑写在这里
}

// 首次加载时触发
document.addEventListener('DOMContentLoaded', handleDateValue);
// 从BF Cache恢复时触发
window.addEventListener('pageshow', handleDateValue);

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