如何編輯此 jQuery 以將其更改保存到 localStorage？

Question

這個 jQuery 非常適合使用相同的 class （userNumber1）更改我所有 div 的背景顏色，當我選中它的復選框時，但我需要它也將這些更改保存到localStorage ，以便每次新頁面出現加載。

在 SO 中搜索一周后，我嘗試了幾種不同的選項，但沒有一個能正常工作。 雖然在大多數情況下我仍然可以更改背景顏色，但其中一些只保存選中的復選框而不保存背景顏色，另一些則相反，但大多數都沒有將兩者保存到 localStorage。

由於我根本不是專家，我真的不知道現在還能做什么。

這是我的 jQuery function：

jQuery(document).ready(function($) {
    $('#option1').on('change', function() {
        if ($(this).is(':checked')) {
            $(".userNumber1").css('background-color', "#a7ddff");
        } else {
            $(".userNumber1").css('background-color', "#ffffff");
        }
    })
})

這是我的 HTML 代碼：

<div class="userNumber1"><input type="checkbox" id="option1"><label for="option1"></label></div>

我完全願意接受任何不同的方法，只要我可以將新的背景顏色和選中/未選中的復選框保存到localStorage 。

預先感謝您的支持。

Answer 1

這是一個工作版本 - 由於沙箱，我們無法在 Stackoverflow 測試 localStorage

https://plungjan.name/SO/lschk/

您需要將存儲的字符串“true”或“false”轉換為 boolean

腳本

// assuming a not set localStorage means a not checked checkbox at load time
let un1 = localStorage.getItem("userNumber1")

un1 = un1 === null ? false : un1 === "true"; // convert the string stored to boolean

jQuery(document).ready(function($) {
  const $opt1 = $('#option1');

  const changeColor = () => { // make a reusable function 
    const chk = $opt1.is(':checked');
    localStorage.setItem("userNumber1", chk)
    $(".userNumber1").css({
      "background-color": chk ? "lightblue" : "yellow"
    })
  };
  
  $opt1
    .prop("checked", un1)       // set the value from localStorage
    .on('change', changeColor); // assign the listener
  changeColor(); // trigger the initial
})

CSS

.userNumber1 {
  background-color: yellow;
}

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>


<div class="userNumber1">
  <label><input type="checkbox" id="option1">Check me</label>
</div>

Answer 2

當用戶單擊選項時，使用您的值設置本地存儲密鑰：

localStorage.setItem('backgroundColor', '#FF00BB');
localStorage.setItem('optionId', 'option1');

在頁面加載時檢索值。 還要檢查相應的復選框：

$('.userNumber1').css('background-color', localStorage.getItem('backgroundColor'));
$('#'+localStorage.getItem('optionId')).prop('checked', true);

資料來源： 為帶有 jQuery 的復選框設置“選中”

Answer 3

jQuery(document).ready(function($) {
const myData = localstorage.getItem('myData') ? JSON.parse(localstorage.getItem('myData')) : {'checked':false,'backgroundColor':'#ffffff'};
$("#option1").attr('checked', myData.checked);
$(".userNumber1").css('background-color', myData.backgroundColor);

$('#option1').on('change', function() {
    myData = {}
    if ($(this).is(':checked')) {
        $(".userNumber1").css('background-color', "#a7ddff");
        myData.checked=true;
        myData.backgroundColor = "#a7ddff";
    } else {
        $(".userNumber1").css('background-color', "#ffffff");
        myData.checked=false;
        myData.backgroundColor = "#ffffff";
    }
   localstorage.setItem('myData',JSON.stringify(myData))
   }) 
})