How to edit this jQuery to also save its changes to localStorage?

Question

This jQuery works great to change the background color of all my divs with the same class (userNumber1), when I check its checkbox, but I need it to also save these changes to localStorage, in order to be there each new time the page is loaded.

After searching for a week in SO, I've tried several different options I've found, but none works properly. While in most cases I can still change the back ground color, some of them save only the checked checkbox but not the background color, other ones do the opposite, yet the most of them save none of both to localStorage.

As I'm not an expert at all, I really don't know what else to do now.

This my 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");
        }
    })
})

and this one is my HTML code:

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

I'm totally open to any different approach, as long as I can save the new background color and the checked/unchecked checkbox to localStorage.

Thank you in advance for your kind support.

Can you include one (or more) of your attempts at using local storage? — DBS, Dec 20 '21 at 11:52

mplungjan · Accepted Answer · 2021-12-20T13:11:32.677

Here is a working version - we cannot test localStorage at Stackoverflow due to the sandbox

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

You need to convert a stored string "true" or "false" to boolean

Script

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

score -1 · Answer 2 · answered Dec 20 '21 at 11:57

-1

Set a local storage key with your value when the user clicks on an option:

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

Retrieve the value when the page loads. Also check the appropriate checkbox:

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

Source: Setting "checked" for a checkbox with jQuery

answered Dec 20 '21 at 11:57

Euthyphro

84
7

@rx65m No problem. The second set of two lines go just inside the jQuery ready function. The first two lines need to run when the user clicks the DOM element. – Euthyphro Dec 20 '21 at 12:19
Unfortunately it is not saving the changes. – rx65m Dec 20 '21 at 12:41
Press F12 and run these lines in the browser and you can see the item is saved and retrieved: localStorage.setItem('backgroundColor', '#FF00BB'); localStorage.getItem('backgroundColor'); Works in Chrome, Firefox, and Edge. Might not work on the default Windows 95 browser. – Euthyphro Dec 20 '21 at 12:47

abhishek sahu · Answer 3 · 2021-12-20T12:21:27.177

-1

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))
   }) 
})

edited Dec 20 '21 at 12:21

answered Dec 20 '21 at 11:58

abhishek sahu

648
4
8

Thank you very much. This saves the checked checkbox, but doesn't save the changed background color. – rx65m Dec 20 '21 at 12:08
you can use store the JSON instead of string which can hold both checkbox & background-color – abhishek sahu Dec 20 '21 at 12:10
Can you tell me how to do that? I have no idea. – rx65m Dec 20 '21 at 12:15
updated my answer now please check – abhishek sahu Dec 20 '21 at 12:15
You typed this out of the code: }) – rx65m Dec 20 '21 at 12:19
ohh missed it, updated it now – abhishek sahu Dec 20 '21 at 12:22
Unfortunately it does not change the background. – rx65m Dec 20 '21 at 12:22
check it was having 2 # in 2nd line might be because of that. – abhishek sahu Dec 20 '21 at 12:23
Still not changing the background color. – rx65m Dec 20 '21 at 12:29

How to edit this jQuery to also save its changes to localStorage?

3 Answers3