JavaScript中两个HTML页面间localStorage的set与get方法失效问题

先梳理下你的现状：one.html里引入的external.js已经能成功把值存入localStorage了（毕竟你存入后立刻弹出了存储的值，这一步是正常的），问题大概率出在two.html的代码实现，或者有几个容易忽略的细节没注意到。下面是一步步的排查和解决方法：

1. 先给two.html补全读取逻辑 #

你提供的two.html只引入了jQuery，完全没写读取localStorage的代码，这是最可能的原因。给你补全代码示例：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
  // 页面加载完成后尝试读取存储的值
  $(document).ready(function() {
    var storedParam = localStorage.getItem("param");
    if (storedParam) {
      alert("从localStorage读取到的值：" + storedParam);
    } else {
      alert("没读到存储的值哦");
    }
  });
</script>

这样打开two.html时，就能主动读取之前存在localStorage里的内容了。

2. 确认两个页面处于同源环境 #

localStorage受同源策略限制，只有当两个页面的协议（http/https）、域名、端口完全一致时，才能共享数据。举几个不符合同源的例子：

• 一个是http://localhost:8080/one.html，另一个是http://127.0.0.1:8080/two.html（域名不同）
• 一个是http://example.com/one.html，另一个是https://example.com/two.html（协议不同）
• 端口不一样，比如http://localhost:8080和http://localhost:8081

如果你的两个页面不在同源环境下，localStorage肯定没法共享。本地开发的话，确保两个页面都在同一个服务器的同一端口下访问就行。

3. 检查浏览器是否禁用了localStorage #

有些浏览器的隐私设置或者插件会禁用localStorage，你可以先在浏览器控制台（按F12打开）手动执行下面的命令测试：

localStorage.setItem("test", "hello");
console.log(localStorage.getItem("test"));

如果控制台报错或者返回null，说明localStorage被禁用了，需要调整浏览器设置或者关闭相关插件。

4. 核对存储和读取的键名是否完全一致 #

localStorage的键名是区分大小写的！比如你存的是"param"，读取时写成"Param"或者"params"，肯定读不到数据，一定要确保键名完全匹配。

5. 确保存储完成后再跳转页面 #

虽然localStorage.setItem是同步操作，但极端情况下（比如页面跳转速度过快），可能出现存储还没完成就跳转的情况。你可以把one.html的跳转逻辑改成点击后先存储再跳转：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
  var global = "parameter";
  $("a").click(function(e) {
    e.preventDefault(); // 先阻止默认跳转行为
    localStorage.setItem("param", global);
    // 存储完成后再跳转到目标页面
    window.location.href = $(this).attr("href");
  });
</script>
<a href="two.html" >2nd page</a>

这样能彻底避免存储未完成就跳转的问题。

按照上面的步骤排查，应该就能解决你的跨页面localStorage读写问题了。

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