Javascript 在另一个脚本中使用全局变量

Question

Script1.js 附加到 MyWebsite1.html 和 MyWebsite2.html，Script2.js 仅附加到 MyWebsite2.html。 Script1.js 首先附在 MyWebsite2.html 中。

Script1.js

var global_var;
function open() {
    global_var = 1;
    window.open("MyWebsite2.html", "_self");
}

Script2.js

$(document).ready(function(){
    console.log(global_var);
});

当调用我的第一个脚本的 open() 函数时（通过 MyWebsite1.html 的 onclick），它将 global_var 设置为 1 并正确打开 MyWebsite2.html。但对于 Script2.js global_var 仍然未定义。 如果我在 Script1.js 中的 open() 函数之外将 global_var 设置为 1，则对于 Script2.js，global_var 为 1。

如果您想知道为什么我使用 $(document).ready(function(){}：因为我想稍后将 html 代码附加到 MyWebsite2.html。

Answer 1

在不同选项卡甚至窗口之间（只要是同一个会话）存储全局变量的最佳方法是使用会话存储。

基本上，会话存储是在浏览器关闭之前一直存在的存储。每个网站都有自己的会话存储。例如，

file:///C:/website.html

和

file:///C:/website2.html

共享相同的会话存储，而

http://localhost

和

https://example.com

则不共享。

会话存储是基于键的，这意味着它存储键的值。 它也不支持非字符串的数据类型。每种类型都会转换为字符串。
以下是如何从会话存储中获取/设置/删除变量

global_var

的示例：

console.log(sessionStorage.getItem("global_var"));
sessionStorage.setItem("global_var", 1);
// Now global_var in session storage is "1" (as a string)
sessionStorage.removeItem("global_var");
// Now global_var is undefined (typeof == "undefined")

访问会话存储的非标准方法是通过点运算符：

console.log(sessionStorage.global_var);
sessionStorage.global_var = 1;
// Stored as "1" string
delete sessionStorage.global_var;
// Stored as undefined

最大会话存储为 20MB。

您的代码将被重写为：

// Script1.js
function open() {
    sessionStorage.setItem("global_var", 1);
    window.open("MyWebsite2.html", "_self");
}

// Script2.js
$(document).ready(function(){
    console.log(sessionStorage.global_var);
});

如何通过这个存储传递对象？您可以使用

JSON.parse

和

JSON.stringify

方法。

localStorage.setItem("global_var", JSON.stringify({a: 123});
console.log(JSON.parse(localStorage.global_var))

另请参阅：Mozilla 文档