使用localStorage()保存一个"closed"State on modal这样它就不会再显

Using localStorage() to save a "closed" state on modal so it doesn't show for that user again

本文关键字：quot modal closed 保存 localStorage 一个 State 使用 on      更新时间：2023-09-26

我有一个弹出式模态，我正在加载我的页面上，我想使它一旦关闭，不显示再次为该用户。我在localStorage();上做过类似的事情，但由于某种原因，我不能弄清楚语法来完成这个工作。

我尝试了一个解决方案，它设置了一个类，但在刷新时它会重新加载原始元素，所以现在我正在尝试这个想法，我将模态的状态更改为"访问"。你知道为了让它像我希望的那样工作，我可能会错过什么吗?

localStorage功能: 

$(function() {
    if (localStorage) {
        if (!localStorage.getItem('visited')) { 
            $('.projects-takeover').show(); 
        }
    } else { 
        $('.projects-takeover').show();
    }
    $('.projects-close').click(function() {
            $('.projects-takeover').fadeOut();
    });
        localStorage.setItem('visited', true);
        return false;
    });

这里是一个jsfiddle的代码实现以及，感谢帮助!

你的javascript代码是正确的。好在您添加了一个jsfiddle，因为问题变得非常容易识别-模态的样式设置在这样一种方式，它总是可见的。只需将display属性更改为.projects-takeover类中的nonе，就可以工作了。查看更新后的fiddle

试试这个->

$(function() {
  var pt = $('.projects-takeover'); //i just hate repeating myself.
  if (localStorage) {
    if (!localStorage.getItem('visited')) { 
        pt.show(); 
    } else {
        pt.hide(); //this bit was missing
    }
  } else { 
    pt.show();
  }
  $('.projects-close').click(function() {
        pt.fadeOut();
  });
  localStorage.setItem('visited', true);
  return false;
});
相关文章：