web-dev-qa-db-fra.com

Lorsqu'un utilisateur ferme un <div>, masquez ce <div> sur toutes les pages du site.

J'ai développé quelques zones d'alerte qui s'affichent sur toutes les pages du site. 

 screenshot of alert boxes

L'utilisateur peut fermer chaque boîte séparément:

$(document).ready(function() {
  $("#close-alert-box-news").click(function() {
    $("#alert-box-news").hide(800);
  });
  $("#close-alert-box-maintenance").click(function() {
    $("#alert-box-maintenance").hide(800);
  });
});
.alert-box {
  width: 50vw;
  position: relative;
  margin: 20px auto;
  border: 1px solid black;
}
.alert-box-close {
  position: absolute;
  top: -12px;
  right: -12px;
  cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>

<article class="alert-box" id="alert-box-news">
  <h1>News Alerts</h1>
  <p>text text text text text text text text text text text text text text</p>
  <a class="alert-box-close" id="close-alert-box-news">
    <img src="http://i.imgur.com/czf8yas.png" height="25" width="25" alt="">
  </a>
</article>

<article class="alert-box" id="alert-box-maintenance">
  <h1>Site Maintenance</h1>
  <p>text text text text text text text text text text text text text text</p>
  <a class="alert-box-close" id="close-alert-box-maintenance">
    <img src="http://i.imgur.com/czf8yas.png" height="25" width="25" alt="">
  </a>
</article>

jsFiddle

Maintenant, je dois m'assurer que la boîte que l'utilisateur ferme (ce pourrait être un, pourrait être les deux), ne réapparaîtra pas lorsqu'il naviguera sur le site ou rechargera une page.

Je pense que je pourrais configurer un cookie PHP pour qu'il expire dans 24 heures. Mais la plupart des publications sur ce site recommandent un cookie JavaScript. Malheureusement, mes efforts pour implémenter une solution JavaScript n'ont pas abouti (les boîtes réapparaissent après leur fermeture). J'ai essayé diverses méthodes, comme indiqué ici:

Quelle serait une méthode simple pour masquer chaque boîte, sur tout le site, pendant 24 heures?

Je suis ouvert à jQuery, à JavaScript, à PHP, aux cookies, aux sessions ou à autre chose.

javascriptphpjquerycookieslocal-storage
35
Michael_B

Utilisez localStorage().

La mémoire locale est par origine (par domaine et protocole)

  • En cliquant sur la fermeture de DIV, vous pouvez obtenir l’horodatage actuel
  • Ajouter le nombre d'heures (24) à cet horodatage
  • Stockez cette valeur dans localStorage sous la forme localStorage.setItem('desiredTime', time)
  • Vérifier l'horodatage actuel avec cet horodatage enregistré localStorage.getItem('desiredTime'), basé sur ce show/hide

jQuery 

$(document).ready(function(){
        //Get current time
        var currentTime = new Date().getTime();
        //Add hours function
        Date.prototype.addHours = function(h) {    
           this.setTime(this.getTime() + (h*60*60*1000)); 
           return this;   
        }
        //Get time after 24 hours
        var after24 = new Date().addHours(10).getTime();
        //Hide div click
        $('.hide24').click(function(){
            //Hide div
            $(this).hide();
            //Set desired time till you want to hide that div
            localStorage.setItem('desiredTime', after24); 
        });
        //If desired time >= currentTime, based on that HIDE / SHOW
        if(localStorage.getItem('desiredTime') >= currentTime)
        {
            $('.hide24').hide();
        }
        else
        {
            $('.hide24').show();
        }
});

HTML 

<div>DIV-1</div>
<div class='hide24'>DIV-2</div>

Choses à noter

  • Vous pouvez aussi utiliser $.cookie, mais c'est une approche plus ancienne maintenant.
  • <div> avec la classe hide24 sera uniquement masqué.
  • Assurez-vous de mettre ce code en JavaScript, qui se charge à chaque requête HTTP de votre site Web.
  • Pour localStorage, vous devriez avoir des navigateurs HTML5.

Stockage Web HTML5

J'espère que cela t'aides.

23
Mohit Tanwani

Suite à @Loading .. réponse:

les cases d'alerte réapparaissent toujours brièvement lors du rechargement avant que ne disparaisse. Des idées?

Pourquoi est-ce?

Les fonctions à l'intérieur de $(document).ready() seront exécutées jusqu'à ce que tout le DOM soit chargé. C'est pourquoi les alertes sont rendues. Dès que la fonction est exécutée, elle les masque.

Solution:

Vous pouvez initialement masquer vos alertes avec une classe uniquement pour profiter du fait que le navigateur ne restitue pas le contenu tant que le CSSOM n'a pas été créé.

La classe que nous utilisons ne fait que définir la propriété display: none;.

.hidden {
  display: none;
}

Cela provoquera bien sûr un rafraîchissement dans le navigateur. (voir les notes) 

Votre logique affiche déjà l'alerte avec 

    if (localStorage.getItem('desiredTime') >= currentTime) {
      $('#alert-box-news').hide();
    } else {
      $('#alert-box-news').show();
    }

Parce que l'utilisation de .show() ajoutera un display: block; de style en ligne, sa spécificité sera supérieure à celle de la classe .hidden, affichant l'alerte.

jsFiddle

Notes:

  • Utiliser display: none; va pousser le contenu sous l'alerte vers le haut ou Vers le bas. Vous pouvez utiliser d'autres méthodes si vous le souhaitez, comme visibility: hidden; ou transform qui n'entre pas dans le cadre de cette réponse.

MODIFIER:

Une illustration sera présentée ci-dessous en procédant comme suit:

  • Le compteur de démonstration a été augmenté à 20 secondes pour les tests.
  • Nous cliquons sur pour fermer l'alerte et déclencher la fonction localStorage, en définissant la clé desiredTime.
  • Une fois la clé définie, nous actualisons le navigateur et cliquons plusieurs fois sur Exécuter pour voir si la clé fonctionne.

  • Enfin, juste pour vérifier que la clé est bien définie, nous allons à:

    DevTools (F12) -> onglet Applications -> Stockage local -> Shell jsFiddle.

  • Run est touché une fois de plus, une fois le compte à rebours terminé, affichant à nouveau l'alerte.

Illustration:

 Local Storage Demo Illustration

Nous aurons peut-être besoin de plus de détails pour résoudre le problème avec cette approche si elle ne fonctionne pas en direct.

6
Ricky

Si j'ai bien compris votre question, cacher les alertes pendant 24 heures (puis les montrer ensuite toutes après un jour) serait une mauvaise expérience utilisateur.

Je suppose que vous chargez ces alertes à partir d'une sorte de base de données. Si tel est le cas, la bonne solution serait de stocker un statut à cet endroit. Qu'il s'agisse d'une colonne status ou d'un horodatage deleted_at, les implémentations sont infinies.

Quoi qu'il en soit, je stockais l'état de l'alerte dans la base de données et filtrais vos données lors de l'extraction en conséquence.

Ainsi, à votre avis, vous auriez (en supposant php ici):

<?php

<?php if(!empty($newlyFilteredAlerts)): ?>
    <article class="alert-box" id="alert-box-news">
        <h1>News Alerts</h1>
        <?php foreach(newlyFilteredAlerts as $alert): ?>
            <p><?= $alert ?></p>
        <?php endforeach;?
        <a class="alert-box-close" id="close-alert-box-news">
          <img src="http://i.imgur.com/czf8yas.png" height="25" width="25" alt=""  >
        </a>
    </article>
<?php endif; ?>

Vous voudriez alors ajouter une sorte de point de terminaison pour modifier le statut de la base de données:

$(document).ready(function() {
    $("#close-alert-box-news").click(function() {
        $.post({
            url: '/alerts',
            type: 'DELETE',
            success: function () {
                $("#alert-box-news").hide(800);                    
            },
        });
    });
});

NOTE: / Cette réponse est destinée à vous orienter dans la bonne direction, pas à écrire votre code ????. Tout le code ci-dessus est complètement non testé, donc si vous le copiez et collez simplement peut ne pas fonctionner .

5
Jason Tolliver

cela ne fonctionnera pas dans stackoverflow. vous pouvez tester en lien de démonstration

Démo

$(document).ready(function() {
  checkCookie("alertDisplayed")
  $("#close-alert-box-news").click(function() {
    setCookie("alertDisplayed", 'yes', 1);
    $(".alert-box").hide(800);
  });
  $("#close-alert-box-maintenance").click(function() {
    setCookie("alertDisplayed", 'yes', 1);
    $(".alert-box").hide(800);
  });
});

function setCookie(cname, cvalue, exdays) {
  var d = new Date();
  d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
  var expires = "expires=" + d.toUTCString();
  document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}

function checkCookie(cname) {
  var name = cname + "=";
  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);
    }
    if (c.indexOf(name) == 0) {
      $(".alert-box").hide();
    }
  }
  return;
}
.alert-box {
  width: 50vw;
  position: relative;
  margin: 20px auto;
  border: 1px solid black;
}
.alert-box-close {
  position: absolute;
  top: -12px;
  right: -12px;
  cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>

<article class="alert-box" id="alert-box-news">
  <h1>News Alerts</h1>
  <p>text text text text text text text text text text text text text text</p>
  <a class="alert-box-close" id="close-alert-box-news">
    <img src="http://i.imgur.com/czf8yas.png" height="25" width="25" alt="">
  </a>
</article>

<article class="alert-box" id="alert-box-maintenance">
  <h1>Site Maintenance</h1>
  <p>text text text text text text text text text text text text text text</p>
  <a class="alert-box-close" id="close-alert-box-maintenance">
    <img src="http://i.imgur.com/czf8yas.png" height="25" width="25" alt="">
  </a>
</article>

3
Mitul

Les cookies et le stockage local servent différents objectifs. Les cookies servent principalement à la lecture côté serveur. Le stockage local ne peut être lu que côté client. 

Dans votre cas, vous gaspillez de la bande passante en envoyant toutes les données de chaque en-tête HTTP. Je vous recommande donc d'utiliser le stockage local HTML Au lieu du cookie.

Selon la différence technique et aussi ma compréhension:

  • En plus d’être une ancienne méthode de sauvegarde des données, les cookies vous offrent une limite de 4096 octets - c’est un cookie. Le stockage local est aussi important que 5 Mo par domaine
  • localStorage est une implémentation de l'interface de stockage. Il stocke les données sans date d'expiration et est effacé Uniquement via JavaScript ou en effaçant le cache du navigateur/les données stockées localement - contrairement à l'expiration des cookies.

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;
}
<article class="alert-box" id="alert-box-news">
  <h1>News Alerts</h1>
  <p>text text text text text text text text text text text text text text</p>
  <a class="alert-box-close" id="close-alert-box-news">
    <img src="http://i.imgur.com/czf8yas.png" height="25" width="25" alt="">
  </a>
</article>

<article class="alert-box" id="alert-box-maintenance">
  <h1>Site Maintenance</h1>
  <p>text text text text text text text text text text text text text text</p>
  <a class="alert-box-close" id="close-alert-box-maintenance">
    <img src="http://i.imgur.com/czf8yas.png" height="25" width="25" alt="">
  </a>
</article>

2
Dhurba Baral

Essayez cette solution jsfiddle et lisez les commentaires concernant le chemin de stockage. Si vous travaillez sur sub domain, vous devez spécifier le domaine dans le cookie écrit comme dans les commentaires setCookie(). Si vous êtes working on localhost, le cookie-domain doit être défini sur "" ou sur NULL ou FALSE au lieu de "localhost". Pour une référence de domaine, vous pouvez étudier cette question de stackoverflow 

function setCookie(cname, cvalue, exdays) {
    var d = new Date();
    d.setTime(d.getTime() + (exdays*24*60*60*1000));
    var expires = "expires="+ d.toUTCString();
    document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
    // document.cookie = cname + "=" + cvalue + ";" + expires + ";domain=.example.com;path=/"; if you are trying in any sub-domain
} 
function getCookie(cname) {
    var name = cname + "=";
    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);
        }
        if (c.indexOf(name) == 0) {
            return c.substring(name.length,c.length);
        }
    }
    return "";
}
$(document).ready(function() {
  if(getCookie('news')==1) { //check if cookie news exist if exist then hide.
    $("#alert-box-news").hide();
  }
  if(getCookie('maintenance')==1) { //check if cookie maintenance exist if exist then hide.
    $("#alert-box-maintenance").hide();
  }
  $("#close-alert-box-news").click(function() {
    setCookie('news',1,1); // set cookie news to 1 for 1 day = 24 hours here setCookie(key,value,number of cookie expiration day)
    $("#alert-box-news").hide(800);
  });
  $("#close-alert-box-maintenance").click(function() {
    setCookie('maintenance',1,1); // set cookie maintenance to 1 for 1 day = 24 hours here setCookie(key,value,number of cookie expiration day)
    $("#alert-box-maintenance").hide(800);
  });
});
2
Rakesh Sojitra

C'est possible avec sessionStorage de javascript.

Par exemple : 

Stocker la date actuelle (var currentDate) et la date après une minute (var afterOneMinute) dans sessionStorage. Chaque clic sur un bouton ou une page de rechargement, changez la date actuelle et comparez-les avec la variable afterOneMinute et après le masquage ou l'affichage

Fichier html 

<head>
    <script src="jquery.js"></script>
</head>
<body>
<button onclick="hideOneMinute()">Hide box while 1 minute </button>
<div id="box" style="border: 1px solid red; display: inherit">
    <h2>Box</h2>
    hello
</div>
<div id="messageBox"></div>
</body>

JS 

<script>
    var currentDate, afterOneMinute;
    function addDate(){
        var current = new Date();
        // Converts current date in seconds
        currentDate = current.getHours()*3600+current.getMinutes()*60+current.getSeconds();
        // Current date + 1 minute
        afterOneMinute = currentDate + 1*60;
    }
    addDate();
    console.log(currentDate);
    // verify sessionStorage when page is reloaded    ;
    if(typeof(Storage) !== "undefined") {
        if(sessionStorage.currentDate){
            addDate();
            sessionStorage.currentDate = currentDate;
            if(Number(sessionStorage.currentDate) < Number(sessionStorage.afterOneMinute))
            {
                $('#box').hide();
                console.log('hide');
            }
            else{
                sessionStorage.clear();
                console.log('show');
                $('#box').show();
            }

        }
    }
    function hideOneMinute() {
        if(typeof(Storage) !== "undefined") {
            if(sessionStorage.currentDate){
                addDate();
                sessionStorage.currentDate = currentDate;
                if(Number(sessionStorage.currentDate) < Number(sessionStorage.afterOneMinute))
                {
                    $('#box').hide();
                }
                else{
                    sessionStorage.clear();
                    console.log('show');
                    $('#box').show();
                }

            }else{
                addDate();
                sessionStorage.currentDate = currentDate;
                sessionStorage.afterOneMinute = afterOneMinute;
                console.log('hide');
                $('#box').hide();
            }
            document.getElementById("messageBox").innerHTML = "Box will be shown at " + sessionStorage.afterOneMinute;
        } else {
            document.getElementById("messageBox").innerHTML = "Sorry, your browser does not support web storage...";
        }
    }
</script>
2
bobo

Vous pouvez utiliser le code que vous avez et définir un cookie qui expire dans 24 heures:

  1. Installez le MDN JavaScript Cookie Framework

  2. Sur votre js, définissez une variable tomorrow contenant la date d'expiration de votre cookie:

    var today = new Date();
var tomorrow = today.setHours(today.getHours() + 24);

  3. Définissez vos cookies comme suit:

    docCookies.setItem('hide_news', 'true', tomorrow);

  4. Masquer conditionnellement les cases en fonction de la valeur du cookie

    if (docCookies.getItem('hide_news') == 'true'){
  $("#alert-box-news").add_class('hidden');
};

  5. Définissez la classe hidden sur votre fichier CSS

    .hidden {
  display none;
}

Vous pouvez voir tout cela en action dans ce codepen .

1
rebagliatte

_ {Mise à jour du script avec une vérification de 24 heures} _

Comment et où vous stockez l'horodatage a plus à voir avec le contrôle que vous souhaitez y avoir.

Puisqu'il y a un utilisateur impliqué, j'irais du côté serveur et créerais un champ supplémentaire dans la table de la base de données des utilisateurs, où ces états sont conservés.

De cette façon, contrairement à l'utilisateur qui peut effacer les cookies/stockage,vouscontrôle quelles alertes doivent rester masquées et pendant combien de temps.

Un deuxième avantage serait que cela peut être, en plus du temps, basé sur des roulements, où certaines actions peuvent être entreprises en fonction des utilisateurs et de leurs informations d'identification.

De toute façon, je construirais le spectacle/masquage comme ceci, où vous stockez une classe, ou un attribut, dans i.e. la balise html, qui contrôle si une boîte sera visuelle ou non.

L'avantage, c'est que vous vous débarrassez du problème "premier spectacle puis masqué" et que cela fonctionne que vous l'ajoutiez côté serveur ou à l'aide d'un script.

Voici un exemple simple utilisant un script, javascript simple, et il n’est nullement optimisé, c’est tout simplement pour la logique que je voulais montrer.

Étant donné que cela ne fonctionnera pas comme un {extrait de pile} en raison d'un problème de sécurité, voici un violon qui fait: https://jsfiddle.net/essjuj4y/10/

En cliquant sur le bouton For this demo - to clear local storage, la mémoire sera effacée et lorsque la page sera exécutée à nouveau, les boîtes apparaîtront.

/*  add an event handler to be able to close a box  */
var alerts = document.querySelectorAll('.alert-box-close');
for (var i = 0; i < alerts.length; i++) {
  alerts[i].addEventListener('click', function(e) {
    var boxtype = e.target.parentElement.id.split('-').pop();
    document.getElementById('alert-box-' + boxtype).style.display = "none";
    localStorage.setItem("al-" + boxtype, new Date());
  })
}

/*  add an event handler to be able to clear storage - for demo purpose  */
document.querySelector('button').addEventListener('click', function(e) {
  localStorage.clear();
})
.alert-box {
  display: none;
  width: 50vw;
  position: relative;
  margin: 20px auto;
  border: 1px solid black;
}

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

.al-news #alert-box-news,
.al-maintenance #alert-box-maintenance {
  display: block;
}
<html>
  <head>
    <script type='text/javascript'>
      function has24HourPassed(key) {
        var storeval = localStorage.getItem(key);
        if (!storeval) return true;    /*  nothing stored in storage  */
        var T24_HOUR = 24 * 60 * 60 * 1000;
        if ((new Date - new Date(storeval)) < T24_HOUR) return false;        
        localStorage.removeItem(key);  /*  24 hours passed so we can remove stored date  */
        return true;
      }
      (function(d) {
        if (has24HourPassed('al-news')) {
          d.classList.add('al-news');
        }
        if (has24HourPassed('al-maintenance')) {
          d.classList.add('al-maintenance');
        }
      })(document.documentElement);
    </script>
  </head>
  
  <body>
    <article class="alert-box" id="alert-box-news">
      <h1>News Alerts</h1>
      <p>text text text text text text text text text text text text text text</p>
      <a class="alert-box-close" id="close-alert-box-news">
        <img src="http://i.imgur.com/czf8yas.png" height="25" width="25" alt="">
      </a>
    </article>

    <article class="alert-box" id="alert-box-maintenance">
      <h1>Site Maintenance</h1>
      <p>text text text text text text text text text text text text text text</p>
      <a class="alert-box-close" id="close-alert-box-maintenance">
        <img src="http://i.imgur.com/czf8yas.png" height="25" width="25" alt="">
      </a>
    </article>

    <button>For this demo - to clear local storage</button>

  </body>
</html>

1
LGSon

Ma réponse est une extension de La réponse de @ Loading . L'émission d'un contenu flash au chargement de la page, même lorsque l'utilisateur a choisi de ne pas afficher l'alerte, est due à l'évaluation de localStorage effectuée après le chargement du DOM.

Par conséquent, je recommanderais de masquer les alertes par défaut, même si cela peut poser problème aux navigateurs sans JS activé. Cela peut toutefois être contourné si vous utilisez modernizr.js qui ajoutera une classe à l’élément HTML lorsque JS sera détecté, et vous pourrez modifier les styles de base en conséquence, par exemple:

.alert-box {
  display: none;
}
.no-js .alert-box {
  display: block;
  /* Other styles */
}

Ma solution utilise localStorage et repose sur le stockage des options en tant qu'objet stratifié: les deux clés stockées par boîte sont hidden (pour stocker le statut de la boîte) et timestamp (pour stocker l'heure à laquelle la boîte est fermée). Ceux-ci peuvent être utilisés pour évaluer si (1) l'utilisateur a choisi de rejeter l'alerte et (2) que l'action a été effectuée dans les 24 heures.

Quelques modifications que j'ai apportées à votre code:

  1. Utilisez la sélection dépendante du contexte afin de ne pas avoir à déclarer plusieurs gestionnaires d'événements de clic similaires pour tous les champs d'alerte. Cela rend le code plus simple et moins redondant.
  2. Utilisez https pour l'URL de l'image afin qu'elle ne soit pas gâchée par le protocole HTTPS de JSfiddle :) 

Le code de travail est affiché comme suit, mais localStorage ne fonctionne pas ici en raison de restrictions de sécurité: pour une démonstration fonctionnelle, reportez-vous à la mise à jour de JSfiddle .

$(function() {
  // Check for localStorage
  if (typeof window.localStorage !== typeof undefined) {
    // Loop through all alert boxes
    $('.alert-box').each(function() {
      var $t = $(this),
        key = $t.attr('id');

      // If key exists and it has not expired
      if (window.localStorage.getItem(key)) {
        var json = JSON.parse(window.localStorage.getItem(key));
        if (json.hide && json.timestamp < Date.now() + 1000 * 60 * 60 * 24) {
          $t.hide();
        } else {
          $t.show();
        }
      } else {
        $t.show();
      }
    });
  }

  // Bind click events to alert boxes
  $('.alert-box a.alert-box-close').click(function() {
    var $alertBox = $(this).closest('.alert-box');

    // Hide box
    $alertBox.hide(800);

    // Store option in localStorage, using the box's ID as key
    if (typeof window.localStorage !== typeof undefined) {
      window.localStorage.setItem($alertBox.attr('id'), JSON.stringify({
        hide: true,
        timestamp: Date.now()
      }));
    }
  });

  // For demo purposes only, clear localStorage to ease testing
  $('#clear-localstorage').click(function() {
    window.localStorage.clear();
  });
});

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

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<article class="alert-box" id="alert-box-news">
  <h1>News Alerts</h1>
  <p>text text text text text text text text text text text text text text</p>
  <a class="alert-box-close" id="close-alert-box-news">
    <img src="https://i.imgur.com/czf8yas.png" height="25" width="25" alt="">
  </a>
</article>

<article class="alert-box" id="alert-box-maintenance">
  <h1>Site Maintenance</h1>
  <p>text text text text text text text text text text text text text text</p>
  <a class="alert-box-close" id="close-alert-box-maintenance">
    <img src="https://i.imgur.com/czf8yas.png" height="25" width="25" alt="">
  </a>
</article>

<button id="clear-localstorage">Clear local storage (for testing)</button>
1
Terry

Vous devriez simplement utiliser le stockage local.

HTML

<article class="alert-box" id="alert-box-news">
  <h1>News Alerts</h1>
  <p>text text text text text text text text text text text text text text</p>
  <a class="alert-box-close" id="close-alert-box-news">
    <img src="https://i.imgur.com/czf8yas.png" height="25" width="25" alt="">
  </a>
</article>

<article class="alert-box" id="alert-box-maintenance">
  <h1>Site Maintenance</h1>
  <p>text text text text text text text text text text text text text text</p>
  <a class="alert-box-close" id="close-alert-box-maintenance">
    <img src="https://i.imgur.com/czf8yas.png" height="25" width="25" alt="">
  </a>
</article>

Javascipt 

$(document).ready(function() {
  var nd = new Date();
  var md = nd;
  var newsclicked = false;
  var maintenanceclicked = false;
  setInterval(function() {
    newsclicked = (localStorage.getItem("newsclicked")) ? new Date(localStorage.getItem("newsclicked")) : false;
    maintenanceclicked = (localStorage.getItem("maintenanceclicked")) ? new Date(localStorage.getItem("maintenanceclicked")) : false;
    if (maintenanceclicked === false) {
      console.log(maintenanceclicked);
      $("#alert-box-maintenance").show(800);
    } else {
      var mddiff = (md.getTime() - maintenanceclicked.getTime()) / (60 * 60 * 24 * 1000);
      if (mddiff >= 1) {
        $("#alert-box-maintenance").show(800);
      } else {
        $("#alert-box-maintenance").hide(800);
      }
    }
    if (newsclicked === false) {
      $("#alert-box-news").show(800);
    } else {
      var nddiff = (nd.getTime() - newsclicked.getTime()) / (60 * 60 * 24 * 1000);
      if (nddiff >= 1) {
        $("#alert-box-news").show(800);
      } else {
        $("#alert-box-news").hide(800);
      }
    }
  }, 200);
  $("#close-alert-box-news").on("click", function() {
    nd = new Date();
    localStorage.setItem("newsclicked", nd);
    $("#alert-box-news").hide(800);
  });
  $("#close-alert-box-maintenance").on("click", function() {
    md = new Date();
    localStorage.setItem("maintenanceclicked", md);
    $("#alert-box-maintenance").hide(800);
  });
});

CSS

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

.alert-box-close {
  position: absolute;
  top: -12px;
  right: -12px;
  cursor: pointer;
}
#alert-box-news,#alert-box-maintenance{
  display:none; // by default have both elements hidden.
}

Voici un update dans votre violon pour le tester en action. Actualisez la page une fois que vous avez fermé une div

1
Peter Darmis