CODEWITHSUNDEEP
javascripthtml
Malekian
Malekian

Reputation: 315

save button background-color in localStorage

I'm trying now to switch the colors everytime user clicks on the button, and save background-color in localStorage. I've tried several options, but until now I didn't get it to work. Anyone a solution how to tackle this? thank u

<!DOCTYPE html>
<html>
<head>
<title>LocalStorage Background Colour Changer</title>
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />

</head>
<body>


<script type="text/javascript">
    if (localStorage.getItem('background') !== null) {
        getColour = localStorage.background;
        $('.btn-secondmenu').css('background', getColour);
    }
    
    $('.btn-secondmenu').click(function() {
        if (getColour == 'blue') {
            localStorage.removeItem('background');
            $('.btn-secondmenu').css('background', 'red');
            localStorage.setItem('background', 'red');
        } else {
            localStorage.removeItem('background');
            $('.btn-secondmenu').css('background', 'blue');
            localStorage.setItem('background', 'blue');
        }
    });
</script>
<button class="btn-secondmenu">Button</button>
</body>
</html>

Upvotes: 0

Views: 2050

Answers (4)

Božo Stojković
Božo Stojković

Reputation: 2943

JS Fiddle has problems with localStorage. Here is JS Bin.

The problem is, you weren't setting the variable getColour properly. You weren't actually updating it when the button is pressed.

Also, the button wasn't loaded when you were trying to set event listener to it. Wrap your code in $(document).ready() when using jQuery.

JS:

$(document).ready(function() {
  var getColour;
  if (localStorage.getItem('background') !== null) {
    getColour = localStorage.background;
    $('.btn-secondmenu').css('background-color', getColour);
  }

  $('.btn-secondmenu').on('click', function() {
    if (getColour == 'blue') {
      getColour = 'red';
      $('.btn-secondmenu').css('background-color', 'red');
      localStorage.setItem('background', 'red');
    } else {
      getColour = 'blue';
      $('.btn-secondmenu').css('background-color', 'blue');
      localStorage.setItem('background', 'blue');
    }
  });
});

HTML:

<script src="https://code.jquery.com/jquery-3.0.0.js"></script>
<button class="btn-secondmenu">Button</button>

Edit: As requested, the background will be different for each page.

JS:

$(document).ready(function () {
  var getColourKey = 'background-' + window.location.search.match(/ID=(\d+)/)[1];
  var getColour;

  if (localStorage.getItem(getColourKey) !== null) {
    getColour = localStorage.getItem(getColourKey);
    $('.btn-secondmenu').css('background-color', getColour);
  }

  $('.btn-secondmenu').on('click', function () {
    if (getColour == 'blue') {
      getColour = 'red';
      $('.btn-secondmenu').css('background-color', 'red');
      localStorage.setItem(getColourKey, 'red');
    } else {
      getColour = 'blue';
      $('.btn-secondmenu').css('background-color', 'blue');
      localStorage.setItem(getColourKey, 'blue');
    }
  });
});

Upvotes: 3

rejo
rejo

Reputation: 3350

Plnkr

HTML:

<button class="btn-secondmenu">Button</button>

JavaScript:

// Add your javascript here
$(function() {
    if (localStorage.getItem('background') !== null)
    {
        getColour = localStorage.background;
        $('.btn-secondmenu').css('background', getColour);
    }
    else
    {
        getColour = 'green';
    }


    $('.btn-secondmenu').click(function() {
        if(getColour == 'blue')
        {
            localStorage.removeItem('background');
            $('.btn-secondmenu').css('background', 'red');
            localStorage.setItem('background', 'red');
        }
        else
        {
            getColour = 'blue';
            localStorage.removeItem('background');
            $('.btn-secondmenu').css('background', 'blue');
            localStorage.setItem('background', 'blue');
        }
    });
});

Upvotes: 2

giannisf
giannisf

Reputation: 2599

You are setting the event listener before setting the actual button.

Put the scripts after the button or use the document.ready

$(function() {
    // your code here
}

or use the .on method.

$(document).on('click', '.btn-secondmenu', function() {
    // Code
})

Upvotes: 0

Anupam Singh
Anupam Singh

Reputation: 1166

You just need to change 

getColour = localStorage.background;

to 

getColour = localStorage.getItem('background');

Upvotes: 1

Related Questions