Saving Values in LocalStorage onclick?

Question

Trying to save this value to localstorage everytime the user clicks either up or down???

<script>
   var Clicks = 800;
   function UpClick() {
      Clicks = Clicks + 25;
      document.getElementById('CountedClicks').innerHTML = Clicks + '';
      if (Clicks > 950) {
         Clicks = 950;
      }
   }
   function DownClick() {
      Clicks = Clicks - 25;
      document.getElementById('CountedClicks').innerHTML = Clicks + '';
      if (Clicks <= 0) {
        Clicks = 25;
      }
   }
</script>

<span id="CountedClicks">800</span>
  <input type="image" src="http://findicons.com/files/icons/2332/super_m/64/navigation_up_button.png" name="1462_EXPOSURE_TI_UP" value="1462_EXPOSURE_TI_UP_BUTTON_WAS_CLICKED" onclick="UpClick()" />

  <input type="image" src="http://findicons.com/files/icons/2332/super_mono/64/navigation_down_button.png" name="1462_EXPOSURE_TI_DOWN" value="" onclick="DownClick()" />

Made it into a jsfiddle : http://jsfiddle.net/JRxcr/6/

Can't seem to get the hang of getItem or setItem, have read hours of material just not getting it hopefully someone can help

thanks...

Answer 1

These are the ones I came up with when I did some experiments.

window.localStorage.setItem('clicks', 20);

window.localStorage.getItem('clicks');

so everything would be something like...

<script>
    var Clicks = 800;
function UpClick() {
    Clicks = Clicks + 25;
    document.getElementById('CountedClicks').innerHTML = Clicks + '';
    document
    if (Clicks > 950) {
        Clicks = 950;
    }
}
function DownClick() {
    Clicks = Clicks - 25;
    document.getElementById('CountedClicks').innerHTML = Clicks + '';
    if (Clicks <= 0) {
        Clicks = 25;
    }
}

function SaveClicks(){
    window.localStorage.setItem('clicks',Clicks);
}

function GetClicks(){
    return window.localStorage.getItem('clicks');
}

</script>

<span id="CountedClicks">800</span>
<input type=
      "image" src="http://findicons.com/files/icons/2332/super_mono/64/navigation_up_button.png" name="1462_EXPOSURE_TI_UP" value=
      "1462_EXPOSURE_TI_UP_BUTTON_WAS_CLICKED" onclick="UpClick();SaveClicks();" />

<input type="image" src="http://findicons.com/files/icons/2332/super_mono/64/navigation_down_button.png" name="1462_EXPOSURE_TI_DOWN" value="" onclick="DownClick();SaveClicks();" />

Answer 2

        <script>

        function UpClick() {
            var count = JSON.parse( localStorage.count )
            Clicks = count + 25;
            document.getElementById('CountedClicks').innerHTML = Clicks;
            if (Clicks > 950) {
                Clicks = 950;
            }
            localStorage.count = JSON.stringify( Clicks );
        }
        function DownClick() {
            var count = JSON.parse( localStorage.count )
            Clicks = Clicks - 25;
            document.getElementById('CountedClicks').innerHTML = Clicks;
            if (Clicks <= 0) {
                Clicks = 25;
            }
            localStorage.count = JSON.stringify( Clicks );
        }

        </script>

        <span id="CountedClicks">800</span>
        <input type=
              "image" src="http://findicons.com/files/icons/2332/super_mono/64/navigation_up_button.png" name="1462_EXPOSURE_TI_UP" value=
              "1462_EXPOSURE_TI_UP_BUTTON_WAS_CLICKED" onclick="UpClick()" />

        <input type="image" src="http://findicons.com/files/icons/2332/super_mono/64/navigation_down_button.png" name="1462_EXPOSURE_TI_DOWN" value="" onclick="DownClick()" />

Answer 3

Here's a quick one:

localStorage['StoredClicks'] = Clicks

This will save your existing Clicks variable into localStorage, under a key named StoredClicks.

Then, to read this value back, you can have something like this:

var Clicks = localStorage['StoredClicks']

..hope this helps!

EDIT: As noted by Kopax Jack Herrauer, localStorage serializes all data into a String, so when reading back an integer value, you should make sure to parse it as an integer. My 'reading back' example from above should be: var Clicks = parseInt(localStorage['StoredClicks'], 10)