jQuery cookie弹出窗口在每个会话中仅显示一次

Question

I use this code to show pop-up to users only once per session. It works but it will show once only on a specific URL. For example, if a user visits www.mydomain.com/some-url-1 it will show only once on that URL, but if a user visits a different URL www.mydomain.com/some-different-url the pop up will show up again.

I want it to show only once across whole domain instead.

Here is the code:

<div id="trex-widget391" class="trex-popup-widget"></div> 
   <script>
       function trexCallback391(trex){document.getElementById("trex-widget391").innerHTML=trex.html;}
       jQuery(".trex-popup-widget").mouseover(function(e){
           if(document.cookie.indexOf("popup_trex") ===-1) {
               jQuery("#trex_overlay_fsl_popup").fadeIn('slow');
               expiry = new Date();expiry.setTime(expiry.getTime()+(10*60*1440000)); 
               document.cookie = "popup_trex=yes; expires=" + expiry.toGMTString();
           }
       });
   </script> 
   <script src="http://clanci.geek.hr/widget/widget.php?id=391" async defer></script>

Does anyone know what needs to be modified to show pop-up only once across whole domain and its subdomains?

Answer 1

If your list of supported browsers allows, it would probably be best to use Web Storage to track whether your user has seen the pop-up in a whole session.

https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API

sessionStorage would allow you to store a value to signify that the user has seen the pop-up. This storage is sandboxed to your domain, and is cleared at the end of the session.

Your snippet would need to be modified to something like:

<div id="trex-widget391" class="trex-popup-widget"></div> 
   <script>
       function trexCallback391(trex){document.getElementById("trex-widget391").innerHTML=trex.html;}
       jQuery(".trex-popup-widget").mouseover(function(e){
           if(!sessionStorage.seenPopup) {
               jQuery("#trex_overlay_fsl_popup").fadeIn('slow');
               sessionStorage.seenPopup = "yes";
           }
       });
   </script> 
   <script src="http://clanci.geek.hr/widget/widget.php?id=391" async defer></script>