When the user closes the announcement don't show notification to user again

Question

I have created a notification bar on my site that I don't want to be shown to users again on subsequent visits after they close it the first time. The bar works as expected, but I can't seem to get the cookie to work to not display it again

js

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

html code

<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

Here is a code example:

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
   // ...
}

First you can use the addCookie() function to add a cookie when you close the announcement.

After that when you display the announcement, check if the cookie hidden is set to yes, if it is set to yes then hide the announcement, otherwise show it.

Also of course you can use different names and values and expiration dates for your cookies, I recommend setting a long expiration date.

Answer 2

I don´t choose use a Cookie for this, I will use the localStorage because is a simple notification:

$(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);

        }


     });   

  
    });
  
  
  });