时间戳

首页 > 解决方案 > 刷新时如何保存页面状态？（HTML，JS）

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

否则 { console.log("否"); }

HTML：

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

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

注意：我必须.SetItem在 if 语句中放入原因，即使该值在存储中，它也会在每次刷新页面时将值设置回零。这就是我发现阻止这种情况的方法。

标签： javascripthtml

解决方案

你要么需要设置一个后端来发送数据并保存你想要存储的信息，要么将数据保存在 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 数据！

推荐阅读