Question

我正在尝试创建一个在30秒内过期的cookie。如果用户在30秒之间刷新页面，则弹出窗口不应该在cookie过期时弹出。如果用户在30秒后刷新页面，则应该看到它。我的问题是它不断弹出，它不会停止。我怎么能阻止它？

<!DOCTYPE html>
<html lang="en">
<head>
  <!-- Bootstrap Core CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
  <!-- Latest jQuery Library -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <!-- Bootstrap Core JS -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
  <!-- Cookie JS for Modal -->
  <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.0/jquery.cookie.min.js"></script>
  <script type="text/javascript">
	$(document).ready(function(){
		$("#myModal").modal('show');
		
	});
	
	
</script>
<script>
   function createCookie(name) {
   debugger;
   var date = new Date();
   date.setTime(date.getTime()+(30*1000));
  // alert(date);
   var expires = "; expires="+date.toString();
   document.cookie = name+"="+expires+"; path=/";
//alert(document.cookie);
}
function showbanner()
{
document.write('<div class="container-fluid"><div id="myModal" class="modal fade">    <div class="modal-dialog">        <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> <h3>REGISTER FOR FALL SESSION</h3></div><div class="modal-body"><div class="row"><div class="col-xs-12 col-sm-6"> <img src="gym.png" alt="gym_promo" style="width:304px;"></div><div class="col-xs-12 col-sm-6"><h3> Reserve Your Spot Today </h3><p> EMAIL : <a href="mailto:PLAYATGYM@GMAIL.COM" target="_top">PLAYATGYM@GMAIL.COM </a> </p><p>OR CALL :<a href="514-795-4266"> 514-795-4266</a> </p> </div></div></div> </div> </div></div></div>');
 
}
  </script>
  
</head>

<body>
<script>
var ban = document.cookie;

createCookie('banner');
if(ban==""){
showbanner();
}

</script>


  

</body>
</html>

Answer 1

我会使用localStorage而不是cookie。不要担心过期，只需在加载时保存当前日期并检查它是否比上次加载时间超过30秒：

var lastVisited = window.localStorage.getItem('last visited');
console.log(
  'It has been',
  Date.now() - 5000 > Date.parse(lastVisited) ? 'more' : 'less',
  'than 5 seconds since your last visit.'
)
window.localStorage.setItem('last visited', new Date());

整页：

<!DOCTYPE html>
<html lang="en">

<head>
  <!-- Bootstrap Core CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
  <!-- Latest jQuery Library -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <!-- Bootstrap Core JS -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
  <!-- Cookie JS for Modal -->
  <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.0/jquery.cookie.min.js"></script>
  <script type="text/javascript">
    $(document).ready(function() {
      $("#myModal").modal('show');

    });
  </script>
  <script>
    function showBanner(name) {
      var lastVisited = window.localStorage.getItem('last visited');
      if (lastVisited == null || Date.now() - 5000 > Date.parse(lastVisited)) {
        document.write('<div class="container-fluid"><div id="myModal" class="modal fade">    <div class="modal-dialog">        <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> <h3>REGISTER FOR FALL SESSION</h3></div><div class="modal-body"><div class="row"><div class="col-xs-12 col-sm-6"> <img src="gym.png" alt="gym_promo" style="width:304px;"></div><div class="col-xs-12 col-sm-6"><h3> Reserve Your Spot Today </h3><p> EMAIL : <a href="mailto:PLAYATGYM@GMAIL.COM" target="_top">PLAYATGYM@GMAIL.COM </a> </p><p>OR CALL :<a href="514-795-4266"> 514-795-4266</a> </p> </div></div></div> </div> </div></div></div>');
      }
      window.localStorage.setItem('last visited', new Date());
    }
    showBanner();
  </script>
</head>
<body>
</body>
</html>

如何使用js弹出一次？

1 个答案: