Localstorage not getting cleared by window.localStorage.clear() JavaScript?

programming
1

Initial code is here:

https://www.makeuseof.com/localstorage-javascript/

It’s the project that I’m trying to understand. It’s the javascript that I’m concerned.

I tweaked the Javascript code to this:

var count = 0;

function increaseCounter() {

count += 1;

window.localStorage.setItem("count", count);

document.getElementById("score").innerHTML = count;

}

function decreaseCounter() {

count -= 1;

window.localStorage.setItem("count", count);

document.getElementById("score").innerHTML = count;

}

function clearCounter() {

window.localStorage.clear();

document.getElementById("score").innerHTML = "";

}

This is what I’ve tweaked

741×558 46.6 KB

I don’t get the need for the commented line in this case. Why’re we using it? I by now of course know it’s needed. But can’t understand why.

I’m facing a problem

  1. I increase count to 13.

  2. I clear localstorage.

  3. I click decrease score. Now, score starts to decrease from 12. So, storage isn’t being cleared right?

Why’s it like that?

Dry run in the above code seems fine.

  1. Initial count=0

  2. Click increase count button

  3. count=1

  4. Again click increase count button

  5. count=2

  6. Now I clear Counter, count should be 0.

  7. I click decrease counter

  8. count=-1

and so on.

What am I missing here?

2

The persistant storage works fine in your example.

One thing I noticed is that you don’t update the value of the count variable after changing the localStorage. Or clearing localStorage…

You have ‘cleared’ the local storage… but the count variable still remembers its original value

In clearCounter() function, try setting count to 0, so that it is the same as the localStorage’s value

2 Likes
3

+1 to what @TheWaste said. Also, welcome to the forums :slight_smile:

2 Likes
4

I see.

var count = 0;
function increaseCounter() {
  // var count = Number(window.localStorage.getItem("count"));
  count += 1;
  window.localStorage.setItem("count", count);
  document.getElementById("score").innerHTML = count;
}
function decreaseCounter() {
  // var count = Number(window.localStorage.getItem("count"));
  count -= 1;
  window.localStorage.setItem("count", count);
  document.getElementById("score").innerHTML = count;
}
function clearCounter() {
  window.localStorage.clear();
  count = 0;
  document.getElementById("score").innerHTML = "";
}

This code works now. But is there a point of using localStorage if I’m doing this? I asked this question to specifically understand the first line.

// var count = Number(window.localStorage.getItem("count"));

5

The line you have referenced:
// var count = Number(window.localStorage.getItem("count"));

Will write the 'localStorage’s value back into the the count variable…
(Which is a good idea, and solves your exact problem!)

But remember: the purpose of LocalStorage is that the values ‘will be remembered’ after the browser is closed.

You only need to use LocalStorage if you need the value to be ‘remembered’ after you close the browser.

In most cases, an application/script does not need LocalStorage.
(Unless ‘remembering the value after closing the browser’ is needed. Typically it isn’t)

6

Regarding ‘is there a point of using localStorage’…

To clarify, localStorage is kind of ‘special’… it’s not something you ‘use everyday’

It goes beyond just writing a value to the memory to use later in the script…

The point of LocalStorage is to “Maintain Persistance” - if you close the browser, it remembers the values.

In most cases you don’t need that.

(Unless, of course, remembering the value after you close the browser is a vital function)

2 Likes