When a user closes a , hide that on all site pages

Question

I\'ve developed a couple of alert boxes that display on all site pages.

The user is able to close each box separately:

Answer 1

Cookies and local storage serve different purposes. Cookies are primarily for reading server-side, local storage can only be read client-side.

In your case you're wasting bandwidth by sending all the data in each HTTP header. So I recommend you to use HTML local storage instead of cookie.

As per the technical difference and also my understanding:

• Apart from being an old way of saving data, Cookies give you a limit of 4096 bytes - its per cookie. Local Storage is as big as 5MB per domain
• localStorage is an implementation of the Storage Interface. It stores data with no expiration date, and gets cleared only through JavaScript, or clearing the Browser Cache / Locally Stored Data - unlike cookie expiry.

https://jsfiddle.net/eath6oyy/33/

$(document).ready(function() {
var currentTime = new Date().getTime();
var timeAfter24 = currentTime + 24*60*60*1000;
  $("#close-alert-box-news").click(function() {
    $("#alert-box-news").hide(800);
    //Set desired time till you want to hide that div
    localStorage.setItem('desiredTime', timeAfter24); 
  });
  if(localStorage.getItem('desiredTime') >= currentTime)
  {
    $('#alert-box-news').hide();
  }else{
    $('#alert-box-news').show();
  }
  
  
  $("#close-alert-box-maintenance").click(function() {
    $("#alert-box-maintenance").hide(800);
    //Set desired time till you want to hide that div
    localStorage.setItem('desiredTime1', timeAfter24); 
  });
  if(localStorage.getItem('desiredTime1') >= currentTime)
  {
    $('#alert-box-maintenance').hide();
  }else{
    $('#alert-box-maintenance').show();
  }
 
});

.alert-box {
  width: 50vw;
  position: relative;
  margin: 20px auto;
  border: 1px solid black;
}

.alert-box-close {
  position: absolute;
  top: -12px;
  right: -12px;
  cursor: pointer;
}

  
News Alerts
  
text text text text text text text text text text text text text text
  
    
  



  
Site Maintenance
  
text text text text text text text text text text text text text text