LocalStorage with jquery-CodePudding

I want Local Storage , I selected but now I want to add local Storage to it so it remembers when I leave the page

I made now this code but it doesn't seem to work properly, could someone please help me ?

HTML

 <div >
                <span >Màu nền</span>
                <div >
                    <button  id="blue" data-value="blue"></button>
                    <button  id="white" data-value="white"></button>
                    <button  id="green" data-value="green"></button>
                    <button  id="gold"  data-value="gold"></button>
                    <button   id="red" data-value="red"></button>
                </div>
            </div>

JQUERY

$(document).ready(function(){

/* =============================== BACKGROUND COLOR =================================*/
        $(".btn-background").click(function(){
            var btnBackGround = $(this).attr('data-value');
            console.log(btnBackGround);

             var btnBG = JSON.parse(localStorage.getItem("btnBG")) || [];
             btnBG.push({
                 btnBG: btnBackGround
             })
            
            $(".btn-background").each(function(){
                if(btnBackGround == "blue"){
                    $("#content").css ("background-color", "blue");
                } 

                if(btnBackGround == "white"){
                    $("#content").css ("background-color", "white");
                } 

                if(btnBackGround == "green"){
                    $("#content").css ("background-color", "green");
                }

                if(btnBackGround == "gold"){
                    $("#content").css ("background-color", "gold");
                } 

                if(btnBackGround == "red"){
                    $("#content").css ("background-color", "red");
                } 
                localStorage.setItem("btnBG", JSON.stringify(btnBG));
            })
        })

}

CodePudding user response：

As I can see, you are making an array of colors but your intention is just use one, so instead of:

var btnBG = JSON.parse(localStorage.getItem("btnBG")) || []; //Replace this

you should ask for the local storage as a default string:

var btnBG = localStorage.getItem("btnBG") || '';`

This also changes the way you define the variable:

btnBG.push({ btnBG: btnBackGround }) // Replace this

Replaced for:

btnBG = btnBackGroud;

And, to keep the value on reload, you are just using onclick. The load of the variable has to come after ready:

$(document).ready(function(){
  var btnBG = localStorage.getItem("btnBG") || '';`
  $("#content").css ("background-color", btnBG );

CodePudding user response：

you can study this example https://jsbin.com/xomuyirodi/3/edit?html,css,js,output

HTML

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width">
        <title>JS Bin</title>
        <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
    </head>
    <body>
        <div >
            <span >Màu nền</span>
            <div >
                <button  id="blue" data-value="blue"></button>
                <button  id="white" data-value="white"></button>
                <button  id="green" data-value="green"></button>
                <button  id="gold" data-value="gold"></button>
                <button  id="red" data-value="red"></button>
            </div>
        </div>
        <div id="content"></div>
    </body>
</html>

$(document).ready(function() {
    var color = localStorage.getItem("btnBG");
    if (color) $("#content").css("background-color", color);

    $(".btn-background").click(function() {
        var btnBackGround = $(this).attr('data-value');
        console.log(btnBackGround);
        localStorage.setItem("btnBG", btnBackGround);
        $("#content").css("background-color", btnBackGround);
    })
});