首次页面加载仅执行一次init函数的实现问题求助

嘿，我来帮你搞定这个问题～你现在的代码每次页面刷新都会重新运行init()，因为浏览器刷新后所有JS代码都会从头执行一遍。要实现仅在首次打开页面时执行init，刷新/重新加载时跳过，我们可以利用浏览器的localStorage本地存储来标记初始化状态，具体修改后的代码如下：

function _(x){ return document.getElementById(x); }

$(document).ready(function(){
  // 检查本地存储是否有初始化标记
  const hasInit = localStorage.getItem('hasInit');
  if (!hasInit) {
    init();
    // 标记已经执行过初始化
    localStorage.setItem('hasInit', 'true');
  }
});

function init() {
  _("page1_id").style.display = "none";
  _("page2_id").style.display = "none";
  _("page0_id").style.display = "block";
}

关键逻辑说明： #

• localStorage是浏览器提供的本地持久化存储，只要用户不手动清除浏览器缓存，存储的内容会一直保留
• 首次加载页面时，localStorage.getItem('hasInit')会返回null，这时就会执行init()并设置标记
• 之后刷新或重新加载页面时，能读取到hasInit的标记值，就会跳过init()的执行
• 如果需要重置这个状态（比如测试新的首次加载效果），可以打开浏览器开发者工具的控制台，执行localStorage.removeItem('hasInit')即可

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