Question

我有以下问题。作为JS的初学者，我试图向用户显示一次启动页面 - 即使已经在broswerd中停用了他的cookie。我确实读过有关localStorage但我无法正确使用它来使其工作。每当我取消激活cookie时，即使我之前访问过，也会显示启动页面。

到目前为止，当用户未停用其Cookie时，我设法隐藏了启动页面。

我需要添加什么，以便像在这个小提琴代码中一样检查本地存储：

var banner = document.getElementById('banner');
if (localStorage.getItem('set') === 'set') {
  banner.style.display = 'none';
} else {
localStorage.setItem('set', 'set');
}

请参阅此处的小提琴：jsfiddle.net/rayon_1990/ogghtw9L /

这个小提琴使用了类似的技巧：jsfiddle.net/Y2D67 /

这是我的Splash页面的实际版本：

HTML代码：

/* Add Cookie to check if the splash page has been visited  */
$(document).ready(function() {
    if ($.cookie('noShowSplash')) $('#splash').hide();
    else {
        $("#close-splash").click(function() {
            $("#splash").fadeOut(1000);
            $.cookie('noShowSplash', true);    
        });
    }
});

#splash {
    background-color: rgba(0, 0, 0, 0.81);
    height: 94.5vh;
    padding: 2vh;
    position:fixed;
    top:0;
    left:0;
    right:0;
    z-index:99;
    color: #fff;
    font-family: 'Roboto', Arial;
}
#splash-inner {
   display: block;
    margin: 0 auto;
    max-width: 500px;
    position: relative;
    top: 10%;
    background: green;
    border-radius: 21px;
    padding: 30px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div id="content">
    <h1>Here is the normal content</h1>
    <p>Lorakis ipserius dolorandiumnerius</p>
</div>
<div id="splash">
    <div id="splash-inner">
        <h1>Hello..!<br> Welcome to ABC
        <br>
        </h1>
        <h2>We wish you a Great Day..!</h2>
        <br>

        <a id="close-splash" href="#">Continue to the website...</a>
    </div>
</div>

我服务器上的测试页面就在这里： http://werbederbe.de/splash1.html

提前谢谢你， Atilla

Answer 1

将您的代码更改为

var banner = document.getElementById('banner');
if (localStorage.getItem('set') != 'set') {
   banner.style.display = 'none';
} else {
  localStorage.setItem('set', 'set');
}

Answer 2

$(document).ready(function() {
    if ($.cookie('noShowSplash')) $('#splash').hide();
    else {
        $("#close-splash").click(function() {
            $("#splash").fadeOut(1000);
            $.cookie('noShowSplash', true);    
        });
    }

    $("#close-splash").click(function() {
      $("#splash").fadeOut(1000);
      localStorage.setItem('set', 'set');    
    });
});

var banner = document.getElementById('splash');
console.log(localStorage.getItem('set'));
if (localStorage.getItem('set') === 'set') {
  banner.style.display = 'none';
}

如何在显示DIV时隐藏DIV，而不使用cookie但使用localStorage信息

2 个答案: