jQuery and localstorage

Question

Right now the following code works, but the notification bar I have disappears if you refresh the page. It should only disappear if the user clicks the close button, but I am not sure how to do that.

jQuery(document).ready(function($) {
var showHowTo = localStorage.getItem("firstvisit");
if(!showHowTo) {
    // Stores visit
    localStorage.setItem("firstvisit", true);
    $('#how-to').show();
} else {
    $('#how-to').hide();
}
$("#close").click(function(){
    $("#how-to").hide();
});  
});

Arun P Johny · Accepted Answer · 2013-12-12 03:59:19Z

1

Set the flag in the close handler

jQuery(function ($) {
    $('#how-to').toggle(localStorage.getItem("closeHelp") != 'true');
    $("#close").click(function () {
        $("#how-to").hide();
        localStorage.setItem("closeHelp", 'true');
    });
});

Also could use .toggle() to simplify the code

Demo: Fiddle

answered Dec 12, 2013 at 3:59

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Artyom Neustroev · Accepted Answer · 2013-12-12 04:00:11Z

0

You are simply hiding it after the user visits the page first time.

You can slightly edit your code, to store the value in localStorage not on page load, but when user actually clicks the close button:

jQuery(document).ready(function($) {
   var showHowTo = localStorage.getItem("userClosedWindow");
   if (!showHowTo) {          
      $('#how-to').show();
   } 
   else {
      $('#how-to').hide();
   }
   $("#close").click(function(){
       // Stores close button click
       localStorage.setItem("userClosedWindow", true);
       $("#how-to").hide();
   });  
});

answered Dec 12, 2013 at 4:00

Artyom Neustroev

8,7355 gold badges36 silver badges59 bronze badges

Comments

Trojan · Accepted Answer · 2013-12-12 06:54:13Z

0

if(! showHowTo): if the user hasn't visited yet, show how-to (set showHowTo=true)

else (equivalent to if (showHowTo)): the user has visited; hide how-to. That is why it disappears if you refresh the page. On reload, showHowTo is still true (since you saved it as such in localStorage).

To fix this:

if (! localStorage.getItem("howToClosed")) {
    $("#how-to").show();
} // no else, because if how-to has been closed, it simply won't show up again
$("close").click(function() {
    $("#how-to").hide();
    localStorage.setItem("howToClosed", true);
}

answered Dec 12, 2013 at 6:54

Trojan

2,25429 silver badges40 bronze badges

Collectives™ on Stack Overflow

jQuery and localstorage

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related