如何將我的數據保存在本地存儲中？

Question

我有這個 function 在單擊后禁用按鈕，如何將 state 保存在本地存儲中。

cancelado: function() {
  var x = document.getElementById("myBtn");
  x.disabled = true;
}

Answer 1

每當您更改按鈕的 state 時，您都需要更新本地存儲中的標志 - 您甚至可以編寫一個 function，它在一個 go 中都可以做到，例如

function setButtonDisabled(state) {
    // Update the button's state
    document.getElementById("myBtn").disabled = state;
    // Set the local storage flag to match
    localStorage.setItem("myBtnState", state);
}

// Usage would be setButtonDisabled(true) to disable or
// setButtonDisabled(false) to enable

當您加載頁面時，您需要獲取 state（如果存在），並更新按鈕，例如

// On page load (or in whatever event creates the button)
window.addEventListener("load", ()=>{
    // Read the saved state from local storage (if not yet saved, will be null)
    let myBtnState = localStorage.getItem("myBtnState");

    if (myBtnState != null) { // If a state has been saved...
        // ...reset the state of the button from the saved state
        document.getElementById("myBtn").disabled = myBtnState == "true"; 
    }
});

請注意，本地存儲只能存儲字符串（技術上是 DOMStrings），而不是布爾值（或數字、對象、函數等），因此我們傳入的值（boolean 值true或false ）將自動轉換為"true"或"false" - 因此我們需要檢查該值是否等於字符串值"true" ，以將其轉換回實際的 boolean 值。

您可以在MDN閱讀有關本地存儲 API 的更多信息。

---

但是，我敢打賭，您想要保存 state 的元素不止這些。 此外，這是一個非常“機械”的問題解決方案。 保存代表頁面的state的某種 JSON object 可能會更好，而不是 state 的效果。

例如，是什么導致按鈕被禁用？ 可以說這是因為用戶在表單中輸入了一個太大的數字。 在這種情況下，最好將數字保存起來，因為這樣不僅可以將其重新填充到框中，而且如果沒有將數字填充到框中，那么按鈕不應該是灰色的。 這也讓我們更好地改變邏輯——如果我們提高了允許數字的最大值，那么在輸入過去太小的數字后返回頁面的用戶仍然會發現該框是灰色的，而如果我們保存了數字，我們可以再次執行計算並意識到他們的數字現在是有效的。