CODEWITHSUNDEEP
javascripthtml
Alexio
Alexio

Reputation: 85

localStorage.getItem retrieves 'null'

I'm trying to get a counter for the number of times a button is pressed but when I try to retrieve it outside the function, it results in 'null' instead.

HTML:

<button class="signupbutton" onclick="counter()"> Yes I'm in!</button>
<div id="counter">
    <p>Number of people that have signed up for the newsletter: </p>
    <div id="counter1">0</div>
</div>

Javascript: 

function counter() {
    var elem = document.getElementById('counter1');
    var count = localStorage.getItem('count');
    if (count == null) {
        count = 0;
    }
    count++;
    localStorage.setItem('count', count);
    elem.innerHTML = count;
}
console.log(localStorage.getItem('count'));
var count1 = localStorage.getItem('count');
var elem = document.getElementById('counter1');
elem.innerHTML = count1;

Upvotes: 2

Views: 6000

Answers (4)

Anton Tropashko
Anton Tropashko

Reputation: 5806

getItem/setItem are unavailable until didFinish will have executed unless Read local storage data using WKWebView

Upvotes: 0

Icepickle
Icepickle

Reputation: 12796

Make your code a bit more DRY would save you a bit of time, in validating that your counter has a "real" value. For the rest, the onclick inside an html element is not encouraged anymore, you can just update your code like

// wait until the page has loaded
window.addEventListener('load', function() {
  // get your elements once
  const counterElement = document.querySelector('#counter1');
  const signupButton = document.querySelector('.signupbutton');

  // assign a click event to your button
  signupButton.addEventListener('click', updateCounter);

  // function to retrieve the counter from your localStorage
  function getKeyOrDefault( key, defaultValue = 0 ) {
    return localStorage.getItem( key ) || defaultValue;
  }

  function updateCounter( e ) {
    let counter = parseInt( getKeyOrDefault( 'counter' ) );
    counter++;
    counterElement.innerHTML = counter;
    localStorage.setItem( 'counter', counter );
    e.preventDefault();
  }
  // set the initial value
  counterElement.innerHTML = getKeyOrDefault( 'counter' );
} );

Ofcourse, don't forget to change your html, to remove the counter function from the html element like

<button class="signupbutton"> Yes I'm in!</button>
<div id="counter">
    <p>Number of people that have signed up for the newsletter: </p>
    <div id="counter1">0</div>
</div>

A sample of this code can be found on this jsfiddle (it is not here, as stackoverflow doesn't support localstorage)

Now, the only thing I am really worried about, is the text of your HTML, note that the localStorage will be a personal storage for all clients, so, if this is a website run from the internet, all persons who arrive there once will start with null (or 0) and just increase by 1 each time they click the button, you will be none the wiser, as it is localStorage.

Ofcourse, if you handle it on 1 computer, where people have to input their data, then you have at least some data stored locally, but still, this isn't a real storage you can do something with ;)

Upvotes: 2

Sagar Roy
Sagar Roy

Reputation: 443

You should convert to integer .. 

function counter() {
var elem = document.getElementById('counter1');
var count = localStorage.getItem('count');
if (count == null) {
    count = 0;
}
count = parseInt(count);
count++;
localStorage.setItem('count', count);
elem.innerHTML = count;
}
console.log(localStorage.getItem('count'));
var count1 = localStorage.getItem('count');
var elem = document.getElementById('counter1');
elem.innerHTML = count1;

Please Try again

Upvotes: 0

meskobalazs
meskobalazs

Reputation: 16041

The code does work. However, you have to make sure, that the counter function is interpreted before the page has loaded. Put the JS at the end of the document head, or rewrite the onlick using addEventListener.

Upvotes: 0

Related Questions