Используйте localalstorage, чтобы скрыть оповещение div

Question

У меня есть следующий код на моей странице, где вы можете закрыть предупреждение, используя X, но предупреждение появляется на каждой странице refre sh. Как мне go сообщить о том, что это оповещение будет окончательно отменено, если щелкнуть этот closebtn? Я предполагаю, что могу использовать js localStorage, но я новичок во всем этом. Любая помощь будет принята с благодарностью.

<div class="alertpilot rndcor">
  <span class="closebtn" onclick="this.parentElement.style.display='none';">&times;

<style>
.alert {
  opacity: 1;
  transition: opacity 0.6s; /* 600ms to fade out */
}
.rndcor {

    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    border-radius: 10px; 
}
</style>


</span>
  Hi <?php echo $pilot->firstname?>! Come join our Discord Server to get the latest news and converse with other pilots. <a href="https://discord.gg/XXXXXX" target="_blank"><img src="http://crew.XXXXX.org/lib/images/joindiscord.png" style="box-shadow: 0 2px 5px rgba(0, 0, 0, 0.16), 0 2px 10px rgba(0, 0, 0, 0.12)"></a>
  <script>
$(document).ready(function () {

window.setTimeout(function() {
    $(".alertpilot").fadeTo(1000, 0).slideUp(1000, function(){
        $(this).remove(); 
    });
}, 7000);

});
</script>
</div>

Answer 1

Вы можете добавить код для setItem и getItem для localStorage как

if(localStorage.getItem("show") !== "true"){
    localStorage.setItem("show", "true");
 }

$(document).ready(function () {

    window.setTimeout(function() {
        if(localStorage.getItem("show") !== "true"){
        $(".alertpilot").fadeTo(1000, 0).slideUp(1000, function(){
            $(this).remove();
            localStorage.setItem("show", "true");
        });
        }
    }, 7000);

    });

$(document).ready(function () {

window.setTimeout(function() {
    if(localStorage.getItem("show") !== "true"){
    $(".alertpilot").fadeTo(1000, 0).slideUp(1000, function(){
        $(this).remove();
        localStorage.setItem("show", "true");
    });
    }
}, 7000);

});