Wie div/Pop-up zeigt einmal im Browser zu machen. Plain Vanilla Skript

Question

// JavaScript Dokument

Ich versuche zu tun, wenn der Benutzer zum Browser geht es nur einmal angezeigt wird. Ich weiß, dass es etwas mit lokalem Speicher zu tun hat, aber alles, was ich sehe, ist jquery, wenn ich etwas Ähnliches suche.

Ich möchte wirklich wissen, wie es Javascript nicht jquery im Klar zu tun.

(function() { 
    "use strict"; 
    console.log("SEAF Fired"); 

    function popup (hideOrshow){ 
     if (hideOrshow == 'hide') 
     document.getElementById("popupBox").style.display="none"; 
     else document.getElementById("popupBox").style.display="block"; 
    } 

    window.onload = function(){ 
     setTimeout(function(){ 
      popup('show'); 
     },3000); 

     document.getElementById('close').onclick=function(){ 
      document.getElementById('popupBox').style.display="none" 
     };   
    } 
})(); 

Answer 1

Mehr über lokale/Session-Speicher ist hier; https://www.w3schools.com/html/html5_webstorage.asp

Ich würde Sie ermutigen, Sitzungsspeicher anstelle des lokalen Speichers zu verwenden.

Warum?

window.localStorage - speichert Daten ohne Verfallsdatum

window.sessionStorage - speichert Daten für eine Sitzung (Daten verloren gehen, wenn der Browser-Tab geschlossen wird)

Unter der Annahme, dass Ihr Browser lokalen Speicher unterstützt und Sie gehen ansonsten mit dem Fall um.

if (!window.sessionStorage.popupFlag) { 
    // Logic to show popup once goes here... 
    window.sessionStorage.popupFlag = true; 
} 

Answer 2

Sie können dazu Cookie verwenden. Ich habe Umgehungswert von hideOrshow in popup Methode von Cookie-Funktion verwenden. Wenn einmal das Popup angezeigt wird und das Cookie gesetzt ist, wird das Popup beim nächsten Mal nicht angezeigt.

Bitte überprüfen Sie unten Code:

(function() { 
     "use strict"; 
     console.log("SEAF Fired"); 

     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 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 ""; 
     } 

     function popup (hideOrshow){ 
       hideOrshow = getCookie("hideOrshow"); 
       if(hideOrshow == ""){ 
        hideOrshow = "hide"; 
        setCookie("hideOrshow", hideOrshow, 365); 
       } 
       if (hideOrshow == 'hide') 
       document.getElementById("popupBox").style.display="none"; 
       else document.getElementById("popupBox").style.display="block"; 
     } 

     window.onload = function(){ 
       setTimeout(function(){ 
         popup('show'); 
       },3000); 

       document.getElementById('close').onclick=function(){ 
         document.getElementById('popupBox').style.display="none" 
       };   
     } 
})();