Popups showing only once per page

Question

Can anyone help me?

I have a pop up on a page and I only want it to show once. I also have another popup on another page running the same code.

What would be the best way to make it so that each pop up only shows once, but on there own page?

$(document).ready(function() {
    if(localStorage.getItem('popupState') != 'shown'){
        $("#voucherForm").delay(10000).fadeIn();
        $("#signupcover").delay(10000).fadeIn();
        localStorage.setItem('popupState','shown');
    }
});

$("#popup-close").click(function() {
  $("#voucherForm").removeAttr( 'style' );
});

Answer 1

Use different local storage variables, ie localStorage.getItem('popup1_State') and localStorage.getItem('popup2_State')

Answer 2

Try this instead, use different variables to control the pop-ups depending on the multiple page address.

switch(location.href) {
   case page1:
     const isPop = locaStorage.getItem('page1');
     if(isPop) {
       popFormOfPage1.pop();
       locaStorage.setItem('page1', false);
     }
     break;
   case page2:
     // same case1
   default:
     // do something
}