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

**URL:** <https://forum.kirupa.com/t/localstorage-not-getting-cleared-by-window-localstorage-clear-javascript/655543>\
**Category:** programming\
**Created:** [December 16, 2022, 2:51pm UTC](https://forum.kirupa.com/t/localstorage-not-getting-cleared-by-window-localstorage-clear-javascript/655543 "2022-12-16T14:51:24Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![polaryeti](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/polaryeti/32/19283_2.png) [@polaryeti](https://forum.kirupa.com/u/polaryeti)\
**Post date:** [December 16, 2022, 2:51pm UTC](https://forum.kirupa.com/t/localstorage-not-getting-cleared-by-window-localstorage-clear-javascript/655543/1 "2022-12-16T14:51:24Z")

</div>

Initial code is here:

> **[How to Use localStorage in JavaScript](https://www.makeuseof.com/localstorage-javascript/)**
>
> As an alternative to cookies, localStorage has much cleaner support in JavaScript and is very easy to work with.

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:

```auto
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

 ![](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/e/7/e7b4e794d0eb894db7fc1efcd15e27ec99fcb583.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?

---

<div class="post-metadata">

**Author:** ![TheWaste](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/thewaste/32/19958_2.png) [@TheWaste](https://forum.kirupa.com/u/TheWaste)\
**Post date:** [December 16, 2022, 11:35pm UTC](https://forum.kirupa.com/t/localstorage-not-getting-cleared-by-window-localstorage-clear-javascript/655543/2 "2022-12-16T23:35:54Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [December 17, 2022, 1:10am UTC](https://forum.kirupa.com/t/localstorage-not-getting-cleared-by-window-localstorage-clear-javascript/655543/3 "2022-12-17T01:10:28Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![polaryeti](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/polaryeti/32/19283_2.png) [@polaryeti](https://forum.kirupa.com/u/polaryeti)\
**Post date:** [December 17, 2022, 2:20am UTC](https://forum.kirupa.com/t/localstorage-not-getting-cleared-by-window-localstorage-clear-javascript/655543/4 "2022-12-17T02:20:19Z")

</div>

I see.

```auto
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"));`

---

<div class="post-metadata">

**Author:** ![TheWaste](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/thewaste/32/19958_2.png) [@TheWaste](https://forum.kirupa.com/u/TheWaste)\
**Post date:** [December 17, 2022, 2:00pm UTC](https://forum.kirupa.com/t/localstorage-not-getting-cleared-by-window-localstorage-clear-javascript/655543/5 "2022-12-17T14:00:59Z")

</div>

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)

---

<div class="post-metadata">

**Author:** ![TheWaste](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/thewaste/32/19958_2.png) [@TheWaste](https://forum.kirupa.com/u/TheWaste)\
**Post date:** [December 17, 2022, 2:08pm UTC](https://forum.kirupa.com/t/localstorage-not-getting-cleared-by-window-localstorage-clear-javascript/655543/6 "2022-12-17T14:08:02Z")

</div>

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)