页面重载后如何保存浏览器控制台变量并自动调用foo函数？

嗨，这个问题咱们可以用浏览器的localStorage来搞定——它能帮我们把数据存在用户的浏览器里，就算页面重载甚至关掉浏览器再打开，数据都还在。不过有个小限制：localStorage只能存字符串类型，所以咱们得把函数转成字符串来存储，等页面重载后再把它转成能执行的函数就行啦。

一、保存foo函数到localStorage #

在触发页面重载之前，咱们先把foo函数转换成字符串，存到localStorage里。比如在你的代码里，调用location.reload()之前加一行存储的代码：

localStorage.setItem('savedFoo', foo.toString());

二、页面重载后恢复并调用foo函数 #

页面重新加载时，咱们先从localStorage里取出之前存的函数字符串，再把它转成可执行的函数。这里用new Function()来实现会比eval更安全一点。

下面是整合后的完整代码示例，你可以直接参考：

// 页面加载时先尝试恢复之前保存的foo函数
let foo;
const savedFooStr = localStorage.getItem('savedFoo');

if (savedFooStr) {
  // 将字符串形式的函数转成可执行的函数
  foo = new Function(`return ${savedFooStr}`)();
} else {
  // 如果没有保存的函数，就定义默认的foo逻辑
  foo = function() { 
    // 这里替换成你实际的bar变量判断逻辑
    let bar = false;
    if(bar){ 
      // 重载前先把foo函数存到localStorage
      localStorage.setItem('savedFoo', foo.toString());
      location.reload(); 
      console.log('reload'); 
    }else{ 
      console.log('do something'); 
      // 这里写你的业务逻辑
      // 执行完不需要重载的逻辑后，记得清除保存的函数
      localStorage.removeItem('savedFoo');
    } 
  };
}

// 调用foo函数
foo();

几个关键点要注意： #

• 要是你的foo函数依赖外部变量（比如示例里的bar），得确保这些变量的状态也能正确处理——如果需要的话，也可以把bar的值一起存在localStorage里哦。
• 当执行到不需要重载的分支（else部分）时，记得用localStorage.removeItem('savedFoo')清除保存的函数，不然下次页面加载还会自动恢复这个函数，可能会影响正常逻辑。

内容的提问来源于stack exchange，提问作者F. Ception