使用localStorage維護複選框的檢查狀態

Question

我試圖製作一個沒有jQuery的清單，其中每個複選框的.checked狀態都保存在localStorage中，以便在瀏覽器或計算機上保留時重新啓動。

Fiddle

要做到這一點，我已經寫了三個功能：

• saveStatus()，保存所有複選框的localStorage的當前狀態。通過點擊按鈕激活。
• loadStatus()，從localStorage加載保存的狀態。在身體標籤中激活加載。
• clearAllInputs()，清除localStorage。通過點擊按鈕 激活。

我無法找到localStorage只接受（「字符串」，「字符串」）鍵值對更好的解決方法。

當我檢查幾個複選框並點擊保存按鈕時，它似乎刷新頁面，並且所有複選框都未選中。同樣的事情發生在我點擊清除按鈕時。

Answer 1

這就是JSON進來的地方。您可以讓對象或數組存儲複選框的狀態。一旦保存到localStorage，請在對象上使用JSON.stringify將其轉換爲字符串。然後將該字符串保存到localStorage。通過從localStorage讀取字符串，然後使用JSON.parse將字符串轉換回用於複選框的對象或數組，可以反過來讀取數據。