如何將復選框狀態保存在localStorage中

Question

我正在為文檔管理器設計一個Web應用程序，並且有一個“設置”頁面，用戶可以在其中看到一對復選框，其格式看起來像iphone切換按鈕。 它們可以正常工作，但是只要用戶離開網站或刷新頁面，這些按鈕的狀態就會重置為默認值。 有沒有一種方法可以使用localStorage保存它們的狀態，還是需要使用Cookie ？ 在JavaScript文件中進行編輯 （如下所示的代碼），有兩個函數，一個稱為saveSettings ，另一個稱為loadSettings ，但是如果我必須在一個函數中全部完成操作，請告訴我。 編輯結束將不勝感激。 到目前為止，我有；

localStorage.CheckboxName = $('#CheckboxName').val();

將復選框保存到localStorage ；以及

$('#CheckboxName').val(localStorage.CheckboxName);

但不會保存。 難道我做錯了什么？

編輯

這是兩個復選框的HTML代碼；

<li style = 'color: #FFFFFF;'>Notifications<span class = 'toggle'><input type = 'checkbox' class = 'toggle' name = 'notifications' id = 'notifications' /></span></li>
<li style = 'color: #FFFFFF;'>Preview<span class = 'toggle'><input type = 'checkbox' class = 'toggle' name = 'preview' id = 'preview' checked = "true" /></span></li>

編輯結束

任何幫助都將是驚人的，在此先感謝x

Answer 1

我不確定，但我一直相信這是這樣的：

window.localStorage.setItem('CheckboxName', $('#CheckboxName').val());

$('#CheckboxName').val(window.localStorage.getItem('CheckboxName'));

Answer 2

您可以嘗試以下

$（“＃CheckboxName”）。is（'：checked'）？'checked'：'not'並保存輸出，似乎是這里的建議： 如何使用本地存儲保留復選框狀態以過濾項目

Answer 3

要存儲項目，只需記住該存儲區僅包含字符串。

例如。

var val = $('#CheckboxName').val();
window.localStorage.setItem(key, JSON.stringify(val));

因此，當您讀回值時，需要反序列化字符串。

var str = window.localStorage.getItem(key);
var obj = $.parseJSON(str);

或者，您可以只進行字符串比較，而無論哪種套件都可以更好地滿足您的需求，我要做的就是將一個ID值對的對象存儲在一個存儲鍵中，然后將它們反序列化以使用適當的對象

例如。

var val = {
    CheckboxName1: true,
    CheckboxName2: false,
    CheckboxName3: false, // ect....
};
window.localStorage.setItem(key, JSON.stringify(val));