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

  • Thread starter Thread starter shivajikobardan
  • Start date Start date
AI Thread Summary
The discussion revolves around a JavaScript project involving localStorage and a counter. The user modified the code to manage a counter that increases, decreases, and clears values stored in localStorage. However, they encountered an issue where, after clearing localStorage, the counter continued to decrease from a previous value instead of resetting to zero. The confusion stemmed from the use of global and local variables named "count." It was clarified that the localStorage value persists even after clearing it unless explicitly reset in the code. The user later updated their code to reset the count variable to zero in the clearCounter function, which resolved the issue. The conversation also touched on the purpose of using localStorage, questioning its necessity if the count variable is reset within the script. The importance of using localStorage to maintain state across page reloads was highlighted, indicating that while resetting the variable works, localStorage serves a different purpose by retaining data even when the page is refreshed.
shivajikobardan
Messages
637
Reaction score
54
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:

Code:
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
HcEpMMKmSiNgkqRuALS1hK7SYV6IVnCFAORZMYpdnPV-Z0e8kg.png

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?
 
Technology news on Phys.org
shivajikobardan said:
What am I missing here?
You are missing the "javascript" language setting for your code box.

shivajikobardan said:
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?
 
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.
 
Simple, clearing the localStorage doesn't reset the variable count.

In your link, they use the function localStorage.getItem. Pretty important detail.
 
pbuk said:
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.
 
shivajikobardan said:
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?
localstorage IS being cleared so something else must be wrong
which others have already revealed
 
pbuk said:
Well I meant how could you find out in your code, but OK, what happens when you do look in the debug console?
localstorage IS being cleared so something else must be wrong
which others have already revealed
please read the question. I've explained everything there. count is not being decreased to 0.
 
shivajikobardan said:
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.
 
pbuk said:
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.
 
  • #10
Update:

This is my project for localStorage.

JavaScript:
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.

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

I didn't get what we did here and why we did here.
 
  • #11
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?
 
  • #12
I've gave JS tag already. Still edited where I could edit.
 
  • #13
shivajikobardan said:
I've gave JS tag already. Still edited where I could edit.
Thank you.
shivajikobardan said:
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?
 

Similar threads

Replies
23
Views
2K
Replies
13
Views
2K
Replies
11
Views
2K
Replies
9
Views
4K
Replies
2
Views
1K
Replies
1
Views
2K
Replies
9
Views
1K
Back
Top