ユーザーごとに一度だけポップアウトを表示

Question

この質問には既に回答がありますが、それがどのように機能するかはまだ分かりません。ここで

は私のコードです：ここでは

は私のJavaScriptのである：ここでは

<!--PopupScript--> 
    <script> 
     // you can use just jquery for this 
     $(document).ready(function(){ 
     $('#overlay-back').fadeIn(500,function(){ 
      $('#popup').show(); 
     }); 

     $(".close-image").on('click', function() { 
      $('#popup').hide(); 
      $('#overlay-back').fadeOut(500); 
     }); 
     }); 
    </script> 

はHTMLです：

 <!--Popup Content--> 
    <div class="container-fluid"> 
    <div id="overlay-back"></div> 
    <div id="popup"> 
    <img src="Assets/images/Deep_Close.png" class="close-image" /> 
    <form name="Mail_list" action="save.php" method="post"> 
    <h4>Subscription</h4> 
    <br/> 
     <div class="form-group"> 
      <label for="first_name">First Name: </label> 
      <input type="text" name="first_name" id="first_name" size="25" placeholder="First Name" autofocus required /> 
     </div> 
     <div class="form-group"> 
      <label for="last_name">Last Name: </label> 
      <input type="text" name="last_name" id="last_name" size="25" placeholder="Last Name" required /> 
     </div> 
     <div class="form-group"> 
      <label for="email">User Email: </label> 
      <input type="text" name="email" id="email" size="25" placeholder="Email" required /> 
     </div> 
     <br/><br/> 
     <input type="submit" value="Submit Form"> 
     <input type="reset" value="Reset Form">   
     </form> 
</div> 
</div> 

このソリューションは、私がそれを必要とする何のために素晴らしい作品ために。問題は、誰かがホームページに移動するたびにポップアップが表示されないようにすることです。ユーザーまたはセッションごとにポップアップを1回だけ表示する必要があります。私はこれが 'クッキー'を使って達成できることを知っていますが、私は上のJavaScriptにどのように組み込むかを正確にはわかりません。

ご協力いただければ幸いです。ありがとうございました。

Answer 1

localStorageを使用できます。

例：

$('#overlay-back').fadeIn(500,function(){ 
     if (localStorage.popupShown !== "true") { 
      $('#popup').show(); 
      localStorage.popupShown = "true"; 
     } 
    }); 

Answer 2

あなたの代わりにクッキーのために行くの

$(document).ready(function(){ 
     if (sessionStorage.count==0) { 
     $('#overlay-back').fadeIn(500,function(){ 
      $('#popup').show(); 
      sessionStorage.count = 1; 
     }); 
     } 

     $(".close-image").on('click', function() { 
      $('#popup').hide(); 
      $('#overlay-back').fadeOut(500); 
     }); 
     });