Question

之前我从未使用过浏览器缓存，而且无法在google上找到好的tutoiral。下面我使用jQuery插件Lightbox_me“http://buckwilson.me/lightboxme/”在页面加载时显示弹出窗口。任何人都可以指导我一个教程，只显示用户第一次访问的内容，或者它是否足够简单，以向我展示演示？可以使用java脚本完成吗？

 <script>
    jQuery(function() {
        function launch() {
             jQuery('#sign_up').lightbox_me({centered: true, onLoad: function() { jQuery('#sign_up').find('input:first').focus()}});
        } 

        jQuery(document).ready(function() {
            jQuery("#sign_up").lightbox_me({centered: true, preventScroll: true, onLoad: function() {
                jQuery("#sign_up").find("input:first").focus();
            }});                
            e.preventDefault();
        });
    });
</script>


<div id="sign_up" style="display:none;">
   pop up box! 
</div>

我的问题是我只希望弹出窗口在用户第一次访问页面时显示，然后缓存，以便在用户返回站点时不再显示。

Answer 1

只需将此代码放在您的所有页面中：

<script>
   if (!localStorage['someName']) {
       localStorage['someName'] = 'yes';
       myFunction();
   }
</script>

为了弄明白，这里是关于localStorage的一个很好的解释：http://diveintohtml5.info/storage.html

Answer 2

我认为你可以用cookie解决这个问题。这是简单的cookie样本：

<html>
 <head>
  <script type="text/javascript">
   $(document).ready(function () {
    if ($.cookie("your_cookie_name" != 1))
    {
     $("div").show("show");
     $.cookie("your_cookie_name", "1", {expires: 1});
    }
   });
  </script>
  <style type="text/css"> 
   div { 
        width: 300px; 
        height: 300px; 
        display: none; 
        background-color: red; 
        border: 1px solid #ddd; 
   }
  </style>
 </head>
 <body>
  <div></div>
 </body>
</html>

但首先你必须download并在HTML文档中包含jquery cookie插件。

显示弹出对话框只能通过缓存首次访问

2 个答案: