How to save custom color on localStorage jquery?

130
March 17, 2022, at 02:30 AM

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");
    });
});
Answer 1
//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);
});
Rent Charter Buses Company
READ ALSO
jquery years months and days variable

jquery years months and days variable

when the system appears, I see that it is very complicated, but I have a problem, I found this code from somewhere, but I am writing because I do not have much knowledge, thank you in advance to those who help

96
Jquery Confirm a form after Validation

Jquery Confirm a form after Validation

I have a html form which I validate with JqueryWhat I want to do now is to let the user review his form and to confirm sending the form after it was validatet by jquery

154
Find element that's on the middle of the visible screen (viewport) to target another element

Find element that's on the middle of the visible screen (viewport) to target another element

What I am aiming to achieve is something that looks like thisyou can see it in action on this URL, if you scroll a bit

102
How to trigger child elements continuous

How to trigger child elements continuous

depending on which container I click, I would like to add a class to the equal boxSo if I click on the first container -> add class to first box

101