Bootstrap 4 alert permanently closed with a cookie

Question

I have this bootstrap 4 alert

<div class="alert alert-warning alert-dismissible fade show" role="alert">
 <button type="button" class="close" data-dismiss="alert" aria-label="Close">
  <span aria-hidden="true">&times;</span>
 </button>
 <p>Alert text</p>
</div>

I want the user not to see it again after it closes one time. How to I set a cookie for this to happen?

Thanks

Answer 1

It's possible through JQuery, but maybe you want a backend check if the cookie is still there. If it isn't there show the alert. Otherwise, show it.

For the JQuery solution, I've created a click listener that sets a cookie when the close button is clicked. This sets a cookie that holds the value that the user clicked the close button on the alert.

I've also created a function that checks for the cookie every time the page gets loaded (this isn't my preferred way. I would have hidden it trough a backend script.). If the cookie isn't there the alert gets shown again.

Using a cookie

$(document).on('click', '.close_once', function() {
  var now = new Date();                 // get current date
  now.setMonth(now.getMonth() + 12);    // add 1 year to the date
  let year = now.toUTCString();         // convert the date to an UTC string
  document.cookie = "HideAlert=true; expires=" + year + "; path=/";   // set cookie
})

$(document).ready(function() {
  var hideAlert = getCookie("HideAlert");   // get the cookie
  if (hideAlert != "") {                    // check for the cookie
    $('.hide_alert').remove();              // if there is a cookie, hide it
  }
})

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="alert alert-warning alert-dismissible fade show hide_alert" role="alert">
  <button type="button" class="close close_once" data-dismiss="alert" aria-label="Close">
  <span aria-hidden="true">&times;</span>
 </button>
</div>

Using local storage

@mplungjan suggested using local storage and I agree with him because of the expiry date on a cookie. So I've created another example that uses local storage. It's mostly the same, but instead of looking for a cookie just check for the variable stored in the local storage. Read more about localStorage here.

$(document).on('click', '.close_once', function() {
  localStorage.setItem('hideAlert', 'true');
})

$(document).ready(function() {
  let hide = localStorage.getItem('hideAlert');
  if (hide === 'true') {
    $('.hide_alert').remove();
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="alert alert-warning alert-dismissible fade show hide_alert" role="alert">
  <button type="button" class="close close_once" data-dismiss="alert" aria-label="Close">
  <span aria-hidden="true">&times;</span>
 </button>
</div>

Answer 2

I suggest you add the bootstrap class d-none and localStorage rather than cookies

<div class="alert alert-warning alert-dismissible fade show" role="alert">
 <button type="button" class="close" data-dismiss="alert" aria-label="Close">
  <span aria-hidden="true">&times;</span>
 </button>
 <p>Alert text</p>
</div>

$(function() {
  const showAlert = localStorage.getItem("alert") === null;
  $(".alert").toggleClass("d-none",!showAlert)
  $(".close").on("click",function() {
    localStorage.setItem("alert","seen");
    $(this).closest(".alert").addClass("d-none")
  });
})