当用户关闭公告时，请勿再次向用户显示通知

Question

我在我的网站上创建了一个通知栏，该通知栏不想在第一次关闭后将其关闭后再次向用户展示。该条按预期工作，但我似乎无法让cookie工作以不再次显示

JS

$(document).ready(function(){
  $(".m-close").click(function(){
      $(".m-bar").hide(600);
  });
});

HTML代码

<center>
  <div class="m-bar m-red">
    <a class="m-microphone"><i class="material-icons" style="font-size:26px;">mic</i></a>
    <a class="m-content" style="color: white;">Something Text</a>
    <a class="m-close" href="#"><i class="material-icons">close</i></a>
  </div>
</center> <br><br>

Answer 1

这是一个代码示例：

function addCookie(name, value, days) {
    var date = new Date();
    date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
    var expires = "; expires=" + date.toGMTString();
    document.cookie = name + "=" + value + expires + "; path=/";
}

function getCookie(name) {
    var nameEQ = name + "=";
    var ca = document.cookie.split(';');
    for (var i = 0; i < ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0) == ' ') c = c.substring(1, c.length);
        if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
    }
    return null;
}

// When clicking the close button
addCookie('hidden', 'yes', 30);

// Checks if the user chose to hide the announcement
const isHidden = getCookie('hidden');

if (isHidden == 'yes') {
   // Hide the announcement
   $(".m-bar").hide(600);
}
else {
   // Show the announcement
   // ...
}

首先，您可以使用AddCookie（）函数在关闭公告时添加cookie。

之后，当您显示公告时，请检查cookie 隐藏是否设置为“是”，如果将其设置为是是，然后隐藏公告，否则请显示。

同样，您当然可以使用不同的名称和值以及cookie的到期日期，我建议设置长期到期日期。

Answer 2

我不会选择为此使用cookie，我会使用localstorage，因为这是一个简单的通知：

$(window).on('load', function(){

    //Create a variable for localStorage return
    var confirm = {
        notification: false
    };

    //Get the Data from localStorage
    let dataconfirm = localStorage.getItem('confirm');

    if(dataconfirm != null){

        confirm.notification = dataconfirm;

    }

    console.log(confirm);
  
    $(document).ready(function(){
 

     $('form').on('click', function(e){

        e.preventDefault();

        if(!confirm.notification === true){

            localStorage.setItem('confirm', true);

        }


     });   

  
    });
  
  
  });