javascript - 变量在一个 JS 文件的多个 HTML 文件中持续存在的问题

Question

这给我带来了很多麻烦，到目前为止，我找到的每个 stackoverflow 问题/答案以及其他所有谷歌搜索都没有给我带来太大帮助。

我有两个 HTML 文件。一种称为cs，另一种称为csi。它们都链接到一个通用的 js 文件，我试图在其中实现将在它们之间持久存在的变量。

该变量通过用户输入在 cs html 中定义，然后在 csi 中调用。

这是 Javascript 的样子。我让它在 body 加载的 cs html 上运行 onlyCS，在 body 加载的 csi html 上运行 onlyCSI。

颜色持续存在，变量MyApp.str在cs中建立，但是当加载到csi时，MyApp.str变成“未定义”

我想我会避免这种情况，因为我建立了 MyApp.str = strChar，它本身是作为一些用户输入建立的，仅在 cs 中可用。

var MyApp = {}; // Globally scoped object

function onlyCS(){
    MyApp.color = 'green';
    setInterval(strdefine, 3000)
}

function onlyCSI(){
    MyApp.color = 'red';
    setInterval(bar, 3000)
}

function strdefine(){
    alert(MyApp.color); // Alerts 'green'
    strChar = parseInt($('#Xdemo').text(), 10);
    $('#result').text(strChar);
    MyApp.str = strChar;
    alert('the myapp global obj (str) is currently ' + MyApp.str);
}

function bar(){
    alert(MyApp.color); // Should alert 'red'
    alert('the myapp global obj (str) is currently ' + MyApp.str);
}

如果有人能帮助我，我将非常感激。

编辑:这些评论帮助我弄清楚使用本地存储和变量是解决我的问题的一个很好的解决方案。

在 strdefine 中我放入了

strChar = parseInt($('#Xdemo').text(), 10);
localStorage.setItem('str', strChar);

并在我放的栏内

alert('LS "str" is currently ' + localStorage.str);
var ex = localStorage.getItem('str') || 0;
$('#result').text(ex);

Answer 1

您可以选择:

• 保留/读取 cookie
• 在本地存储中保留/读取
• 在 session 存储中保留/读取
• 发送到服务器，然后从服务器取回(可能在某些 session 变量中)

仅将变量放入 JavaScript 对象中不会在页面刷新后持续存在。您还可以使用 AJAX 读取某些 HTML 部分，然后将其应用到某个容器中的页面(不是整个页面，只是一些部分，如 <div>my new</div> 等。存储在某个服务器端文件中