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

我有一个JavaScript文件，上面有一些变量，有多个HTML文件访问它，但我希望它能够在我更改JavaScript中的变量时，在不同的HTML文件中以及重新加载页面时保留该值

假设这是我的JavaScript文件，让我们称它为variables.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>

数字
/*我已经分别和一起尝试了这三种方法，但当在不同的HTML文件上访问或重新加载页面时，该值会重置回10*/
数量=2；
setItem（“编号”，2）；
localStorage.number=2；

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

---

这里有什么问题？

问题出在前两行

变量中。js

：

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

每次加载

variables.js

时（在HTML文件顶部用

调用它），本地存储设置为

1

，并且考虑到

number

设置为之后，本地变量

number

也设置为1（稍后输出到页面）

与将number设置为

parseInt（localStorage.number）

不同，您希望使用

localStorage.getItem（“number”）

从localStorage检索值，并且希望在修改它之前执行此操作

要先输出一个值，然后在用户第二次看到页面时输出一个新值，可以使用

if（localStorage.number）

检查该值是否已设置。如果已设置，则设置新值。如果未设置，则设置原始值。在将值输出到页面时，您还需要检查这一点

这可以在以下（沙盒）StackSnippet中看到：

//输出存储器中的任何内容，*如果设置了*
if（localStorage.number）{
document.getElementById（“输出”）.innerHTML=localStorage.getItem（“编号”）；
}
//如果该数字已设置为1，请将其设置为2
if（localStorage.number）{
setItem（“编号”，2）；
}
//否则将其设置为1
否则{
setItem（“编号”，1）；
}

---

尚未设置你的电话号码是多少

do？很抱歉反应太晚，谢谢你的帮助，但是如果我要更改html文件中的数字变量，我该怎么做呢？没问题

number

是一个JavaScript变量，因此无论是否使用外部

.js

文件，它都需要进入

标记中。如上所述，使用

.innerHTML

将其输出回DOM。您可以在JavaScript条件中随意更改它，但如果希望它在刷新过程中“持久化”，还需要更新

localStorage

中的变量。只要记住调用

localStorage.setItem（“number”，x）任何时候都可以更改它并使其持久化。HTML将在下一页加载时自动反映更改：）很抱歉再次延迟回复，但我已经解决了！谢谢你，伙计！你帮了大忙！