Set Local Storage Item to Value of 'span' Tag

Essentially, I want to grab the value of an item stored locally and set that to the value of a 'span' tag nested in an 'h2' tag. You will notice from my code that the number locally stored increases by one every time the 'test' button is clicked. My code properly stores the number, but does not update the 'span' tag - even when I reload the page. Also, I am using Bootstrap which accounts for bits of the code :)

HTML:

<h2 class="text-center"><span class="single" id="memberCount"></span>    
Members and Counting.</h2>

<button class="btn btn-success" id="test">Test</button>

Javascript:

var increment = 23;

$("#memberCount").val(localStorage.getItem("memberCount"));

$("#test").on('click', function () {

     increment++;

     if (typeof localStorage !== 'undefined') {

         localStorage.setItem("memberCount", increment);

     }else {

        alert("Your browser is out of date. Please update.");

     }

});

Thanks so much for all your help!

Answers 1

  • use .text() or .html(), cause .val() is meant for form action elements.

    var increment = localStorage.memberCount || 23;
    $("#memberCount").text( increment );
    
    $("#test").on('click', function () {
      localStorage.memberCount = ++increment;
      $("#memberCount").text( increment );
    });
    

    jsBin demo

    P.S: don't be afraid of localStorage http://caniuse.com/#search=localstorage


Related Articles