刷新時如何保存頁面狀態？ （HTML、JS）

Question

（免責聲明：我是編碼新手，所以我的代碼可能不是最佳的。如果您知道更好的方法，請隨時將其留在評論中）

大多數時候我不知道自己在做什么，但是在耐心和你們的幫助下，我想出了這個：

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

/* 在函數內部，您必須獲取項目並更改它的樣式屬性或添加一個類來添加樣式 */

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