更改 HTML 页面时，由 Javascript 函数更改的数组值重置答案

【问题标题】：Array values changed by Javascript function resets when changing HTML pages更改 HTML 页面时，由 Javascript 函数更改的数组值重置
【发布时间】：2020-11-29 05:18:20
【问题描述】：

我的 javascript 中有一个名为 Counter 的空白数组。当我运行 test() 函数时，我希望它向数组添加一个值并更改 HTML 页面。但是在第二页中，如果我console.log(Counter)，则显示为空白。

如何在更改页面时向数组添加值同时保持它？

Javascript

var Counter = [];

function test() {
    Counter.push("1")
    window.location.replace("page2.html")
}

【问题讨论】：

请参考：stackoverflow.com/questions/23213788/…

标签： javascript html

【解决方案1】：

创建一个新的文本文件并将您的 Counter 变量添加到其中...

 var Counter = [];

...然后将文本文件重命名为 Shared.js

现在将此行添加到需要此变量的所有 HTML 页面的 HEAD 部分...

<script src="Shared.js"></script>

所有页面现在应该能够共享此数组以及您可能希望添加到 Shared.js 的任何其他变量。

【讨论】：

【解决方案2】：

试试这个：window.location.replace("page2.html?Counter=" + Counter)

【讨论】：

【解决方案3】：

刷新或转到其他网页时不会保存变量。如果您想保存它们，可以尝试将它们保存在 Cookie 中，或者更简单的解决方案，HTML5 存储。

首先，您使用 JSON 将变量转换为字符串：var CounterString = JSON.stringify(Counter);

然后，将字符串保存在 HTML5 存储中：localStorage.setItem("Counter", CounterString);

之后，无论您想在何处访问 Counter，只需使用：Counter = JSON.parse(localStorage.getItem("Counter"));（它会获取 Counter 字符串并将其解析回 JavaScript 对象。

完整代码：

var Counter = JSON.parse(localStorage.getItem("Counter"));

function test() {
    Counter.push("1")
    var CounterString = JSON.stringify(Counter);
    localStorage.setItem("Counter", CounterString);
    window.location.replace("page2.html")
}

【讨论】：

【解决方案4】：

JavaScript 执行上下文仅限于单个页面。换句话说，当您离开页面时，您的所有 JavaScript 变量都会丢失。

一种解决方案是使用localStorage。

LocalStorage 允许您保存跨会话（相同域）持续存在的少量数据。您可以将字符串化数组保存到localStorage 并在加载页面时将其取回。

//Save array to localstorage
window.localStorage.setItem('arr', JSON.stringify(arr));


//Retreive item from localStorage
arr = window.localstorage.getItem('arr');
arr = JSON.parse(arr);

还有其他解决方案，例如将字符串化数组值作为 ural 参数传递到下一页。但我猜localStorage 工作量少。

【讨论】：

有什么方法可以在不将数组更改为字符串的情况下做到这一点？我仍然需要将它用于其他计算。
原始数组保持不变。字符串转换只是为了保存在localStorage中。

【解决方案5】：

你也可以使用 sessionStorage。

PageOne.html

<html>
    <head>
        <title>Page One</title>
    </head>
    <body>
        <button onClick="test()">Click me!</button>
        <script>
        var Counter = [];

        function test() {
            Counter.push("1");
            sessionStorage.setItem("counter", JSON.stringify(Counter));
            window.location.replace("PageTwo.html");
        }
        </script>
    </body>
</html>

PageTwo.html

<html>
    <head>
    </head>
    <body>
        <script>
            var counter = sessionStorage.getItem("counter");
            console.log(counter);
        </script>
    </body>
</html>

【讨论】：