Javascript 刷新时如何保存页面的状态？（HTML，JS）

（免责声明：我不熟悉编码，因此我的代码可能不是最佳的。如果您知道更好的方法，请随时将其保留在评论中）

大多数时候我都不知道自己在做什么，但在耐心和你们的帮助下，我想到了这个：

if (window.localStorage) {

// Create the Key/Value 
var cNum = localStorage.getItem("currentNumber");

if (localStorage.currentNumber == undefined) {
  localStorage.setItem("currentNumber","0");}
    
// Variables
resetCount.innerHTML = localStorage.currentNumber;

// Functions
function btnR() {
    cNum++;
    localStorage.currentNumber = cNum;
    resetCount.innerHTML = cNum;}}

else{console.log（“No”）；}

HTML:

重置
0

我创建了一个按钮，每次你点击它时，它会重置复选框，但我还需要一个计数器来查看他们休息了多少次。问题是，每次我点击按钮，计数器也会重置。现在问题解决了，我可以尝试对复选框应用相同的东西，这样它们也不会在刷新时重置

---

注意：我必须将

.SetItem

放在if语句中，即使该值在存储器中，每次刷新页面时它都会将该值设置为零。这就是我找到的阻止这种情况的方法。

您可以使用

LocalStorage

。 它将数据保存在页面中，以便在刷新或关闭页面后再打开页面时使用

有一个例子：

（不幸的是，它在stackoverflow站点中似乎不起作用，但如果您尝试使用HTML文件，它就会起作用）

var loadFunc=（elem）=>{
log（“保存的值是：”+localStorage.getItem（“savedValue”）；
if（localStorage.getItem（“savedValue”）{//检查值是否保存
elem.checked=localStorage.getItem（“savedValue”）；
}
}
变量clickFunc=（元素）=>{
localStorage.setItem（“savedValue”，elem.checked）；//如果在localStorage中，则设置te值
}

单击复选框，值将被保存。

您需要设置一个后端，向其发送数据并保存要保存的信息，或者将数据保存在localStorage中

只需知道，在本地存储中保存敏感信息不是最佳做法（因为它们可能会在跨站点脚本攻击中受损）

localStorage.setItem将一点数据放入localStorage（直到清除它为止），localStorage.getData将其提取

这可能有助于您开始使用localStorage，但您必须找出将颜色设置为所拥有元素的函数

let boxColour = localStorage.getItem("boxColour");

if (boxColour === null) {
  setBoxColour("colour");
} else {
  setBoxColour(boxColour);
}

function setBoxColour(colour){ localStorage.setItem("colour");}

/*在函数内部，您必须获取项目并更改其样式属性，或者添加类以添加样式*/

---

小心本地存储数据

window.localStorage

，或向远程服务器发出AJAX/

fetch

请求。提示您使用localStorage并侦听每个输入更改。非常感谢，这对我帮助很大。关于数据方面的问题，目前我只是在自己的文件上创建页面，而没有使用互联网连接。你知道，仅仅一个星期，就在html/css/js上乱搞。但再次感谢你的帮助！

let boxColour = localStorage.getItem("boxColour");

if (boxColour === null) {
  setBoxColour("colour");
} else {
  setBoxColour(boxColour);
}

function setBoxColour(colour){ localStorage.setItem("colour");}