Javascript 使用localStorage记住弹出框的关闭状态

我在我的站点（）上实现localStorage时遇到困难

我想做的是：

• 每页上都会弹出新闻稿订阅窗口-效果很好
• 单击X关闭订阅弹出窗口-这也可以正常工作
• 记住窗口的关闭状态，这样我们网站上访问的所有其他页面都不会出现弹出窗口，并在用户已经关闭弹出窗口后激怒用户-这是不起作用的。一点也不

我的想法是使用localStorage设置一个变量，然后引用该变量以查看是否应该显示窗口。我的逻辑和语法很可能是粗略的，所以如果有人能给我提供正确的方法，我将不胜感激

我为订阅弹出窗口修改的代码如下所示：

<script>
function setSignup(val) {
localStorage.setItem("popState", val); 
}

function getSignup() {
$(window).on("load", function() {   
    if(localStorage.getItem("popState") == 'hide'){
        //$(".signup").hide();
        $(".signup").css("display", "none");
    }
    else if (localStorage.getItem("popState") != 'hide'){
        $(".signup").css("display", "block");
    }
});
}
</script>

<div class="signup">
<div class="signup-header">Sustainable Living</div>
<span class="closebtn" onclick="setSignup('hide');this.parentElement.style.display='none';">×</span>
<div class="signup-container">
<p>Get new articles related to <em>sustainability</em> and <em>eco-friendly home decor</em> direct to your inbox. We respect your privacy.</p>
<form action="https://reclaimdesign.us9.list-manage.com/subscribe/post?u=0c1d87de694b90628655f4ab9&amp;id=bab84d57de" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" rel="noopener" novalidate>
    <div id="mc_embed_signup_scroll">
<div class="mc-field-group">
    <input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL" placeholder="Please Enter Your Email Address" required autocomplete="email">
</div>
    <div id="mce-responses" class="clear">
        <div class="response" id="mce-error-response" style="display:none"></div>
        <div class="response" id="mce-success-response" style="display:none"></div>
    </div>
    <div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_0c1d87de694b90628655f4ab9_bab84d57de" tabindex="-1" value=""></div>
    <div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
    </div>
</form>
</div>
</div>

功能设置信号（val）{
setItem（“popState”，val）；
}
函数getSignup（）{
$（窗口）.on（“加载”，函数（）{
if（localStorage.getItem（“popState”）=“隐藏”）{
//$（“.signup”）.hide（）；
$（“.signup”）.css（“显示”、“无”）；
}
else if（localStorage.getItem（“popState”）！=“hide”）{
$（“.signup”）.css（“显示”、“块”）；
}
});
}
可持续生活
×
将有关可持续性和环保家居装饰的新文章直接发送到您的收件箱。我们尊重您的隐私

是您的getSignup调用不正确。 在这里，您可以看到没有jquery的替代解决方案

JS-Bin
功能设置信号（val）{
setItem（“popState”，val）；
}
函数getSignup（）{
if（localStorage.getItem（“popState”）=“隐藏”）{
//$（“.signup”）.hide（）；
document.querySelector（'.signup'）.style.display='none'；
}else if（localStorage.getItem（“popState”）！=“hide”）{
document.querySelector（'.signup'）.style.display='block'；
}
}
window.addEventListener（“加载”，getSignup）；
可持续生活
×
将有关可持续性和环保家居装饰的新文章直接发送到您的收件箱。我们尊重您的隐私

是您的getSignup调用不正确。 在这里，您可以看到没有jquery的替代解决方案

JS-Bin
功能设置信号（val）{
setItem（“popState”，val）；
}
函数getSignup（）{
if（localStorage.getItem（“popState”）=“隐藏”）{
//$（“.signup”）.hide（）；
document.querySelector（'.signup'）.style.display='none'；
}else if（localStorage.getItem（“popState”）！=“hide”）{
document.querySelector（'.signup'）.style.display='block'；
}
}
window.addEventListener（“加载”，getSignup）；
可持续生活
×
将有关可持续性和环保家居装饰的新文章直接发送到您的收件箱。我们尊重您的隐私

非常感谢你们的支持。我通过以下方式获得了它（适用于可能遇到相同问题的任何人）

HTML:

JQuery：

$(document).ready(function() {

    $('.signup').css('display', 'block');

    $PopUp = $('.signup');

    var hide = JSON.parse(localStorage.getItem('hide'));

    if (hide) {
        $PopUp.hide();
    } else {
        // initialize value in case it hasn't been set already
        localStorage.setItem('hide', false);
    }

    $('.closebtn').click(function() {
        $('.signup' ).hide();
        // toggle the boolean by negating its value
        var hide = JSON.parse(localStorage.getItem('hide'));
        localStorage.setItem('hide', !hide);
    });
});

---

非常感谢你们的意见，伙计们。我通过以下方式获得了它（适用于可能遇到相同问题的任何人）

HTML:

JQuery：

$(document).ready(function() {

    $('.signup').css('display', 'block');

    $PopUp = $('.signup');

    var hide = JSON.parse(localStorage.getItem('hide'));

    if (hide) {
        $PopUp.hide();
    } else {
        // initialize value in case it hasn't been set already
        localStorage.setItem('hide', false);
    }

    $('.closebtn').click(function() {
        $('.signup' ).hide();
        // toggle the boolean by negating its value
        var hide = JSON.parse(localStorage.getItem('hide'));
        localStorage.setItem('hide', !hide);
    });
});

什么时候调用getSignup（）函数？我不认为它被称为任何地方。您不需要那个函数包装器，只需加载窗口……什么时候调用getSignup（）函数？我不认为它被称为任何地方。你不需要那个函数包装器，只需要窗口加载。。。。

$(document).ready(function() {

    $('.signup').css('display', 'block');

    $PopUp = $('.signup');

    var hide = JSON.parse(localStorage.getItem('hide'));

    if (hide) {
        $PopUp.hide();
    } else {
        // initialize value in case it hasn't been set already
        localStorage.setItem('hide', false);
    }

    $('.closebtn').click(function() {
        $('.signup' ).hide();
        // toggle the boolean by negating its value
        var hide = JSON.parse(localStorage.getItem('hide'));
        localStorage.setItem('hide', !hide);
    });
});