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

【问题标题】：how to save state of the page when refreshing? (HTML, JS)刷新时如何保存页面状态？（HTML，JS）
【发布时间】：2020-10-23 09:45:26
【问题描述】：

（免责声明：我是编码新手，所以我的代码可能不是最佳的。如果您知道更好的方法，请随时将其留在 cmets )

大部分时间我都不知道自己在做什么，但在耐心和你们的帮助下，我想出了这个：

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：

<button id="resetButton" onclick="btnR()">Reset</button>
        <p id="resetCount">0</p>

我正在创建一个按钮，每次单击它时，它都会重置复选框，但我还想要一个计数器来查看它们被休息了多少次。问题是每次我单击按钮时，计数器也会重置。现在解决了，我可以尝试对复选框应用相同的内容，因此它们也不会在刷新时重置。

注意：我不得不将 .SetItem 放在 if 语句中，因为即使该值在存储中，它每次都会将值设置为零我刷新了页面。我发现这是阻止这种情况的方法。

【问题讨论】：

window.localStorage，或向远程服务器发出 AJAX/fetch 请求。
提示您使用 localStorage 并监听每个输入更改。

标签： javascript html

【解决方案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 数据！

【讨论】：

非常感谢，对我帮助很大。关于数据问题，目前我只是在自己的文件上制作页面，而不使用互联网连接。你知道，仅仅一周后，就开始使用 html/css/js。但再次感谢您的帮助！

【解决方案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)">

【讨论】：