javascript - 如何使用 localStorage 更改 HTML 文件上 .js 上的变量值，并在其他 HTML 文件上保留该值？

Question

我有一个包含一些变量的 JavaScript 文件和多个访问它的 HTML 文件，但我希望这样当我在 JavaScript 中更改变量时，该值会保留在不同的 HTML 文件中以及当我重新加载页面时。

假设这是我的 JavaScript 文件，我们称之为变量.js

localStorage.setItem("number", 1);

var number = parseInt(localStorage.number);

console.log(number);

说这是我的 HTML 文件之一

<script src="variables.js">
number;
</script>

<script>
/*I've tried all 3 of these separatetly and together, but the value resets back to 10 when accessed on a different HTML file or when I reload the page*/
number = 2;
localStorage.setItem("number", 2);
localStorage.number = 2;
</script>

当我重新加载页面时，变量的值重置回 1 而不是 2

这里有什么问题吗？

Answer 1

问题出在 variables.js 的前两行中:

localStorage.setItem("number", 1);
var number = parseInt(localStorage.number);

每次variables.js被加载(它在 HTML 文件的顶部用 <script src="variables.js"> 调用)，localStorage 设置为 1 ，并考虑number 之后设置局部变量 number 也设置为1(稍后输出到页面)。

而不是将数字设置为 parseInt(localStorage.number) ，您希望使用 localStorage.getItem("number") 从 localStorage 中检索值，并且您希望在修改它之前执行此操作。

要首先输出一个值，然后在用户第二次看到该页面时输出一个新值，您可以检查该值是否设置为 if (localStorage.number) 。如果已设置，则设置新值。如果未设置，则设置原始值。在将值输出到页面时，您还需要检查这一点。

这可以在以下(沙盒)StackSnippet 中看到:

// Output whatever is in the storage, *if* it is set
if (localStorage.number) {
  document.getElementById("output").innerHTML = localStorage.getItem("number");
}

// If the number has already been set to 1, set it to 2
if (localStorage.number) {
  localStorage.setItem("number", 2);
}
// Else set it to 1
else {
  localStorage.setItem("number", 1);
}

<div id="output">Not set yet!</div>

在 this JSFiddle snippet 。

希望这有帮助! :)