Alert / Announcement Banner #alert #announcement #javascript #localStorage

banner_alert.js

(function ($) {

  "use strict";
  
  /**
   * LocalStorage based Alert Bar
   *
   * This 'Alert Bar' will track (localStorage) whether user has
   *   manually clicked 'close' on a CURRENT banner.
   * 
   * If the 'bannerText' changes, then the next time the user visits the site,
   *   they will see the NEW banner.
   *
   * Note: Technically is pure JavaScript, not jQuery.
   */
  let AlertBanner = document.getElementById("alert-banner");

  if( AlertBanner ) { announcementBar(); }

  function announcementBar() {
    let closeBanner = document.getElementById("alert-banner__close-btn");
    let bannerText = document.getElementById("alert-banner__text").textContent;

    if (localStorage.getItem("ut-banner-data") != bannerText) {
      // If different, reset hide bar value for local storage.
      localStorage.setItem("ut-banner", "false");
    }

    if(localStorage.getItem("ut-banner") == "true") {
      // If false, remove the bar container.
      AlertBanner.remove();
    } else {
      // If true, remove hide class.
      AlertBanner.classList.remove("d-none");
    }

    closeBanner.addEventListener("click", function() {
      AlertBanner.remove();
      localStorage.setItem("ut-banner-data", bannerText);
      localStorage.setItem("ut-banner", "true");
    });
  }
  
})(jQuery);