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