Why is my localStorage code not working?

Question

I'm trying to make a div div disappear and stay gone even when the user comes back. It doesn't seem to do what I want. When I press the button, nothing happens. Not even the value of the localStorage changes...

localStorage.done = localStorage.done || false;
$('#myButton').addEventListener('click', function() {
    if (!localStorage.done) {
        localStorage.done = true;
        $('#myDiv').style.display = "none";

    }
});

`localStorage.done = localStorage.done || false` - what's the point of this expression? — Šime Vidas, Jul 21 '11 at 23:11
considering undefined is falsey, giving a default of false seems a bit strange. — Matt Briggs, Jul 21 '11 at 23:16
It's just so that when the user comes back, it won't go back to false if it was changed to true earlier. It worked a bunch of times for me. — David G, Jul 21 '11 at 23:37

score 6 · Accepted Answer · answered Jul 21 '11 at 23:13

6

You code for the localStorage is actually working (even if its suggested to use its getter/setter methods instead of direct property access).

Your problem is this:

$('#myButton').addEventListener('click', function() {

jQuery does not know about .addEventListener you want just to call .bind()

    localStorage.done = localStorage.done || false;
    $('#myButton').bind('click', function() {
        if (!localStorage.done) {
            localStorage.done = true;
            $('#myDiv').hide();
        }
    });

answered Jul 21 '11 at 23:13

jAndy

231,737
57
305
359

If I understand correctly, the OP wants the DIV to stay hidden on subsequent visits. Therefore, a immediate check should exist: `if ( localStorage.done ) { div.hide(); }` – Šime Vidas Jul 21 '11 at 23:18
`localStorage.done = localStorage.done || false;` - isn't this useless? All it does is it sets the key to `false` if it was `undefined`. – Šime Vidas Jul 21 '11 at 23:19
I'm not using JQuery. I made up the $ function from scratch and am just trying to make a div invisible forever after the user presses the button – David G Jul 21 '11 at 23:36
The issue from OP has to do with key/value being stored as a string, and consequently if ("false") { } evaluates to true against OP's expectations. – hayesgm Jul 21 '11 at 23:47
OP = Original Poster. Reddit lingo I believe. But hey, check out my answer below; it addresses the core of your issue. – hayesgm Jul 21 '11 at 23:59

score 1 · Answer 2 · edited May 23 '17 at 11:58

1

localStorage only stores strings. Thus, localStorage.done = false serializes to "false". The following code will fix your problem (see JSFiddle):

 localStorage.done = localStorage.done || "false";
 document.getElementById('myButton').addEventListener('click', function() {
   if (localStorage.done == "false") {
     localStorage.done = "true";
     document.getElementById('myDiv').style.display = "none";
   }
 });

Note, to avoid confusion with jQuery, I used standard DOM "getElementById". You can also consider using "0" and "1" instead of "true" and "false".

While this restriction is not present in the W3 Specification, it applies to current browsers. See this post for more information. Happy coding!

edited May 23 '17 at 11:58

Community

1
1

answered Jul 21 '11 at 23:15

hayesgm

8,678
1
38
40

I'm not using JQuery. I made up the `$` function from scratch and am just trying to make a div invisible forever after the user presses the button – David G Jul 21 '11 at 23:35
I understand your issue now (has to do with serialization of localStorage objects). See my revamped post for your solution. Enjoy! – hayesgm Jul 21 '11 at 23:42

Why is my localStorage code not working?

2 Answers2