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

[shivajikobardan]

TL;DR Summary

localstorage not getting cleared by window.localStorage.clear()

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

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?

 

[pbuk]

What am I missing here?

You are missing the "javascript" language setting for your code box.

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

Why do you think the value in localstorage is not being cleared? How could you find out?

 

[Mark44]

It looks to me like there are three variables named count: the global one at the top of the code, and the other two local variables in the increaseCounter() and decreaseCounter() functions. By commenting out the first line of code in these two functions, these functions are now using the globally defined counter variable. If the same two lines are uncommented, the local count variables override the global one.

 

[jack action]

Simple, clearing the localStorage doesn't reset the variable count.

In your link, they use the function localStorage.getItem. Pretty important detail.

 

[shivajikobardan]

Why do you think the value in localstorage is not being cleared? How could you find out?

open console Ctrl+Shift+J and go to Application=>Local Storage. See there.

 

[pbuk]

open console Ctrl+Shift+J and go to Application=>Local Storage. See there.

Well I meant how could you find out in your code, but OK, what happens when you do look in the debug console?

Spoiler

localstorage IS being cleared so something else must be wrong

Spoiler

which others have already revealed

 

[shivajikobardan]

Well I meant how could you find out in your code, but OK, what happens when you do look in the debug console?

Spoiler

localstorage IS being cleared so something else must be wrong

Spoiler

Spoiler

which others have already revealed

please read the question. I've explained everything there. count is not being decreased to 0.

 

[pbuk]

please read the question. I've explained everything there.

You don't understand: I know exactly what you have done wrong, I am trying to help YOU to work out for yourself what it is. But others have told you what is wrong anyway and how to fix it.

 

[shivajikobardan]

You don't understand: I know exactly what you have done wrong, I am trying to help YOU to work out for yourself what it is. But others have told you what is wrong anyway and how to fix it.

oh. count is not being decreased to 0 when local storage is being cleared.. that's the issue. I'm not getting that.

 

[shivajikobardan]

Update:

This is my project for localStorage.

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 going to do like this? My goal for asking the question was to understand the first line.

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

I didn't get what we did here and why we did here.

 

[pbuk]

Why should anyone bother to help you if you can't be bothered to set the language to Javascript in your code blocks as you have been repeatedly asked?

 

[shivajikobardan]

I've gave JS tag already. Still edited where I could edit.

 

[pbuk]

I've gave JS tag already. Still edited where I could edit.

Thank you.

This code works now. But is there a point of using localstorage if I'm going to do like this?

No, not if you are going to do it like this. But there is something different about a browser's localStorage from a variable in a script: what do you think this is?