刷新时如何保存页面状态？(HTML, JS)

Question

大多数时候我都不知道自己在做什么，但凭借耐心和你们的帮助，我想到了这个：if (window.localStorage) {// Create the Key/Value var cNum = localStorage.getItem("currentNumber");if (localStorage.currentNumber == undefined) {  localStorage.setItem("currentNumber","0");}    // VariablesresetCount.innerHTML = localStorage.currentNumber;// Functionsfunction btnR() {    cNum++;    localStorage.currentNumber = cNum;    resetCount.innerHTML = cNum;}}else { console.log("否"); }HTML:<button id="resetButton" onclick="btnR()">Reset</button>        <p id="resetCount">0</p>我正在创建一个按钮，每次您单击它时，它都会重置复选框，但我还想要一个计数器来查看他们休息了多少次。问题是每次我点击按钮时计数器也会重置。现在已经解决了，我可以尝试对复选框应用相同的东西，这样它们也不会在刷新时重置。注意：我不得不把它.SetItem放在 if 语句中，即使值在存储中，它也会在我每次刷新页面时将值设置回零。这是我发现阻止它的方式。

Answer 1

您要么需要设置后端以将数据发送到并保存要存储的信息，要么将数据保存在 localStorage 中。

只知道将敏感信息保存在 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");}

/* 在函数中你必须获取项目并改变它的样式属性或者添加一个类来添加样式 */

小心 localStorage 数据！

Answer 2

你可以使用LocalStorage. 它将数据保存在页面中，以便在页面刷新或关闭并稍后打开时使用。

有一个例子：

（不幸的是，它似乎在 stackoverflow 网站上不起作用，但如果你尝试在你的 HTML 文件中它会起作用）

var loadFunc = (elem) => {

  console.log("Value saved is: "+ localStorage.getItem("savedValue"));

  

  if(localStorage.getItem("savedValue")){ //checks if value is saved or not

    elem.checked = localStorage.getItem("savedValue");

  }

}

var clickFunc = (elem) => {

  localStorage.setItem("savedValue", elem.checked); //set te value if in localStorage 

}

Click the checkbox and the value will be saved.

<input type="checkbox" onload="loadFunc(this)" onclick="clickFunc(this)">