在页面之间同步 JavaScript 变量答案

【问题标题】：Sync a JavaScript variable between pages在页面之间同步 JavaScript 变量
【发布时间】：2021-01-12 07:58:19
【问题描述】：

多年来，我一直在寻找一种方法来访问另一个 .html 文件中的变量。例如：文件 1 (HTML)

<!--some code-->
<script>
var x; //this should equal the variable in the other file.
</script>

文件 2 (HTML)

<!--some code-->
<script>
var y = 0;
</script>

我该怎么做？（我可以将文件 2 的代码移动到单独的 .js 文件中。

【问题讨论】：

你想解决什么问题？
在一个单独的 JS 文件中执行所有操作并将这个 js 文件加载到您的两个 html 文件中
只需将2的代码移动到一个单独的js文件中，并像这样将它包含在1中
@OzgurSar 你在no longer need type="text/javascript" 标签上script，仅供参考。

标签： javascript html

【解决方案1】：

将变量存储在 localStorage 中会更好。

在一页设置key

localStorage.setItem('key', value);

从另一个获取值

localStorage.getItem('key')

另一种方法是使用cookies。

【讨论】：

set 和 get 不是使用 localStorage 的正确方法。我得到localStorage.set is not a function。
应该是setItem和getItem。

【解决方案2】：

为此，您可以使用所有现代浏览器都支持的localStorage。

请注意，localStorage.setItem() 将对您尝试存储的不是字符串的所有内容执行.toString()。最好使用JSON.stringify() 和JSON.parse() 来设置和检索所有内容。字符串本身可能不需要这样做，但总是这样做并没有太大的伤害。

我经常使用辅助函数来使其更容易使用，如下所示：

function storeObject(key, x) {
  localStorage.setItem(key, JSON.stringify(x));
}

function retrieveObject(key) {
  return JSON.parse(localStorage.getItem(key));
}

storeObject("test", { a: 2, b: 3 } );

const obj = retrieveObject("test")
console.dir(obj.a); // prints 2
console.dir(obj.b); // prints 3

PS 我没有创建堆栈片段，因为 sn-ps 不允许使用 localStorage。

【讨论】：