如何隱藏DIV一旦顯示，不使用cookies，但使用localStorage的信息

Question

我有以下問題。作爲JS的總入門者，我試圖僅向用戶展示一次醒目頁面 - 即使在用戶瀏覽器中禁用了他的cookies。我確實閱讀了localStorage，但我無法正確使用它來使其工作。每當我停用cookies時，即使我之前訪問過，頁面也顯示出來。

到目前爲止，我設法隱藏了啓動頁面，當用戶沒有停用他的cookies。

我將有哪些補充，從而使本地存儲還檢查就像這個撥弄代碼：

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/

這裏是我的醒目網頁的實際版本：

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