如何实现HTML首次生成时记录时间，页面刷新后时间保持不变？

这需求很好实现，核心思路就是把首次生成的时间持久化存储在浏览器里，这样刷新页面时不用重新生成，直接读取存储好的时间就行。浏览器自带的localStorage刚好能满足这个需求——它会把数据存在用户本地，除非手动清除缓存或调用API删除，否则数据会一直保留。

修改后的完整代码 #

HTML部分

<div> 
  <b>Time Generated: </b>
  <span style="padding-right:410px" id='time'></span> 
</div>

（注：帮你修正了原代码里<span>标签未闭合的小问题）

JavaScript部分

// 获取显示时间的元素
const timeElement = document.getElementById("time");

// 从localStorage读取已保存的生成时间
const savedTime = localStorage.getItem("pageGeneratedTime");

if (!savedTime) {
  // 如果没有保存过时间，生成当前时间
  const d = new Date();
  const currentTime = d.toLocaleTimeString();
  // 把时间存入localStorage
  localStorage.setItem("pageGeneratedTime", currentTime);
  // 显示时间
  timeElement.innerHTML = currentTime;
} else {
  // 如果已有保存的时间，直接显示
  timeElement.innerHTML = savedTime;
}

代码逻辑说明 #

• localStorage.getItem(key)：读取存储在本地的指定键值对数据
• localStorage.setItem(key, value)：将数据以键值对形式存入本地存储
• 整体逻辑很直观：页面加载时先检查有没有保存过首次生成时间，没有就生成并存起来，有就直接用保存的内容，这样刷新页面就不会重新生成时间了。

补充细节 #

• 这个时间会和当前域名绑定，同一域名下的页面共享这个存储的时间；
• 如果用户手动清除浏览器缓存（或删除特定域名的本地存储数据），再次打开页面会重新生成时间；
• 如果需要区分不同页面的生成时间，可以给键名加上页面标识，比如pageGeneratedTime_index（对应首页）、pageGeneratedTime_about（对应关于页）。

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