如何编辑此 jQuery 以将其更改保存到 localStorage？

Question

当我选中它的复选框时，这个 jQuery 可以很好地更改具有相同类 (userNumber1) 的所有 div 的背景颜色，但我还需要它来将这些更改保存到 localStorage，在每次加载新页面时都会出现在此处。

在 SO 中搜索了一周后，我尝试了几种不同的选项，但没有一个可以正常工作。虽然在大多数情况下我仍然可以更改背景颜色，但其中一些只保存选中的复选框而不保存背景颜色，另一些则相反，但大多数都没有将两者保存到 localStorage。

由于我根本不是专家，我真的不知道现在还能做什么。

这是我的 jQuery 函数：

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”转换为布尔值

脚本

// 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);

来源：Setting "checked" for a checkbox with 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))
   }) 
})