How to store changes in background color using localStorage in JavaScript?

I have several html elements such as body, div, and nav whose background color can be changed by the user globally.

These elements are targeted using a specific class name.

The way it works is: There are 3 buttons to change the bg.color of each of the 3 elements. When a user clicks on a button, it will open a modal containing all the colors available, in which there are at least 300 different colors. Once they click on a hex value, all the elements with that specific class name will change its color.

Please see this example below. I removed the modal for simplicity and only targets 1 class name: card-bg.

function changeBgColor(color){
    var elements = document.getElementsByClassName("card-bg")
    for (var i = 0; i < elements.length; i++) {
        elements[i].style.background=color;
    }
}

<div class="card-bg">
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit reiciendis asperiores incidunt accusamus mollitia eligendi culpa ea iure harum, repellendus animi natus odio unde explicabo, perspiciatis consectetur laudantium eius. Nisi!
</div>

<br/>

<div class="card-bg">
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit reiciendis asperiores incidunt accusamus mollitia eligendi culpa ea iure harum, repellendus animi natus odio unde explicabo, perspiciatis consectetur laudantium eius. Nisi!
</div>

<div style="background-color: #ffebee" class="text-dark">
    <p>Red 50 <span><a onclick="changeBgColor('#FFEBEE');">#FFEBEE</a></span></p>
</div>
<div style="background-color: #ffcdd2" class="text-dark">
    <p>100 <span><a onclick="changeBgColor('#FFCDD2');">#FFCDD2</a></span></p>
</div>
<div style="background-color: #ef9a9a" class="text-dark">
    <p>200 <span><a onclick="changeBgColor('#EF9A9A');">#EF9A9A</a></span></p>
</div>

This is working fine, but I would like to add something more to improve its function which is the localStorage. So that when users shut down their computers, they will be able to save their customization.

Additionally, I would like to have a new button to reset these colors to default if the user chooses to.

I’ve just learned about it and I’m still trying to figure out JavaScript in general… though I’d like to implement this feature.

Any help would be much appreciated. Thank you so much in advance!

>Solution :

In your change color function, if a color is provided, set it to local storage. If it isn’t provided, retrieve the value saved to the local storage. Then change the color of the elements.

function changeBgColor(color){
    // if provided color, set color to LS
    if (color) window.localStorage.setItem('bgColor', color);
    // if no provided color, check LS for color, and if no color in LS, fail silently
    else if (!(color = window.localStorage.getItem('bgColor'))) return;

    // update the page
    var elements = document.getElementsByClassName("card-bg")
    for (var i = 0; i < elements.length; i++) {
        elements[i].style.background=color;
    }
}

and in your load function, just update the page by calling the same function with empty args:

window.addEventListener('DOMContentLoaded', () => changeBgColor());