Question 15041 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

LocalStorage with jquery

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 class="d-flex align-items-center me-4">
    <span class="input-group-text d-inline-flex">Màu nền</span>
    <div class="ms-2">
        <button class="border border-dark btn btn-primary p-3 btn-background" id="blue" data-value="blue"></button>
        <button class="border border-dark btn btn-light p-3 btn-background" id="white" data-value="white"></button>
        <button class="border border-dark btn btn-success p-3 btn-background" id="green" data-value="green"></button>
        <button class="border border-dark btn btn-warning p-3 btn-background" id="gold" data-value="gold"></button>
        <button class="border border-dark btn btn-danger p-3 btn-background" 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));
        })
    })

}
Tags:

2

Answers


  1. 0

    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 );
    Login or Signup to reply.
  2. 0

    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 class="d-flex align-items-center me-4">
            <span class="input-group-text d-inline-flex">Màu nền</span>
            <div class="ms-2">
                <button class="border border-dark btn btn-primary p-3 btn-background" id="blue" data-value="blue"></button>
                <button class="border border-dark btn btn-light p-3 btn-background" id="white" data-value="white"></button>
                <button class="border border-dark btn btn-success p-3 btn-background" id="green" data-value="green"></button>
                <button class="border border-dark btn btn-warning p-3 btn-background" id="gold" data-value="gold"></button>
                <button class="border border-dark btn btn-danger p-3 btn-background" id="red" data-value="red"></button>
            </div>
        </div>
        <div id="content"></div>
    </body>
</html>

    JS

    $(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);
    })
});
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search