2

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";

    }
});
Jeff Atwood
  • 63,320
  • 48
  • 150
  • 153
David G
  • 94,763
  • 41
  • 167
  • 253

2 Answers2

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();
        }
    });
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
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!

Community
  • 1
  • 1
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