在页面之间同步 JavaScript 变量

Question

我一直在寻找一种方法来访问 another.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 文件中。

Answer 1

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

一页设置key

localStorage.setItem('key', value);

从另一个检索值

localStorage.getItem('key')

另一种方法是使用cookies 。

Answer 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 我没有创建堆栈片段，因为片段不允许使用 localStorage。