How to save custom color on localStorage jquery?-CodePudding

I` have a function in jquery witch allow users to change background color of site. But if they refresh the page background-color go to default. How can i use LocalStorage with this jquery function

sessionStorage.setItem("bg_color", "#000");
let personName = sessionStorage.getItem("bg_color");

$(document).ready(function() {
    $('.dark__mode').click(function() {
        $('#headerCustomColor').css("background-color", personName);
        $('#TogleBarWi').css("color", "#fff");
        $('.custom_color_link').css("color", "#fff");
    });
});

CodePudding user response：

//You have to check if there is a certain background
// If there is a background color use it else use default
let background = localStorage.getItem("background") ? localStorage.getItem("background") : "#FFF";

// Change header on document loading the background color based on localStorage
$('#headerCustomColor').css("background-color", background);

// On click
$('.dark__mode').click(function() {
    // Set the variable background to custom
    background = "#383838";
    // Set localStorage bg color to custom 
    // This is to enable on refresh so the new bg is set.
    localStorage.setItem("background", background);
    
    // Recolor the header after the click
    $('#headerCustomColor').css("background-color", background);

});