Question

（免责声明：，我是编码的新手，所以我的代码可能不是最佳的。如果您知道更好的编码方法，请随时在注释中保留< strong>）

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

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（“否”）; }

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");}

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

小心那些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)">

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

2 个答案:

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

2 个答案:

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