Question

现在，以下代码可以正常工作，但如果刷新页面，我的通知栏就会消失。它应该只在用户点击关闭按钮时消失，但我不知道该怎么做。

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

Answer 1

在关闭处理程序中设置标志

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

也可以使用.toggle()来简化代码

演示：Fiddle

Answer 2

您只是在用户第一次访问该页面后隐藏它。

您可以稍微编辑代码，将值存储在localStorage而不是页面加载，但是当用户实际点击关闭按钮时：

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

Answer 3

if(! showHowTo)：如果用户尚未访问过，请展示操作方法（设置showHowTo=true）

else（相当于if (showHowTo)）：用户已访问过;隐藏操作方法。这就是为什么它刷新页面时会消失的原因。在重新加载时，showHowTo仍然是正确的（因为您在localStorage中保存了它。）

解决此问题：

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

jQuery和localstorage

3 个答案: