如何使用插件jquery.cookie?

时间:2015-02-05 22:21:01

标签: cookies jquery-plugins

我尝试使用jquery.cookie插件在本地计算机中设置cookie。我已经下载了所需的jquery文件并使用以下代码创建了一个html文件:

<!DOCTYPE html>
<html>
  <head>
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
   <script type="text/javascript" src="jquery-1.11.2.min.js "></script>
   <script type="text/javascript" src="jquery.cookie.js "></script>
  </head>
  <body>
   <script>
     $(document).ready(function(){
       $.cookie('name','value');
     });
   </script>
  </body>
</html>

但是它没有在谷歌浏览器中设置的cookie。怎么了?感谢。

1 个答案:

答案 0 :(得分:0)

我想出了如何做到这一点:首先必须在服务器中打开html文件。我已经配置了apache,所以我用localhost打开文件。然后是代码:

<!DOCTYPE html>
<html>
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
   <script type="text/javascript" src="../javaframeworks/jquery-1.11.2.min.js"></script>
   <script type="text/javascript" src="../javaframeworks/jquery-cookie/src/jquery.cookie.js"></script>
   <link rel="stylesheet" type="text/css" href="../css/shadowbox.css" />
   <script type="text/javascript">
      if ($.cookie('backdrop')==null){
          $(document).ready(function(){
             $('.backdrop, .box').animate({'opacity':' 0.85'}, 250, "linear");
             $('.box').animate({'opacity':' 1.00'}, 250, "linear");
             $('.backdrop , .box').css('display', 'block');
             $('.close').click(function(){
                 close_box();
             });
             $('.backdrop').click( function(){
                 close_box();

             });  

          });
          $.cookie('backdrop','1');
       }
       function close_box(){
          $('backdrop, .box').animate({'opacity':'0'},250, 'linear',function(){
                $('.backdrop , .box').css('display', 'none');
          });
        }  
    </script>
</head>
<body>
     <div class="backdrop"></div>
     <div class="box">
         <div class="close"><img src="../img/big_close.png"></div>
         <div class="contentbox">
             <img src="../img/warning.jpg" id="aviso">
             <h4 id="msg"> Está página está em fase de desenvolvimento</h4>
         </div>
     </div>
</body>
</html>

此代码的目标是在页面内容前面显示带有消息的div并放置一个opact背景。但只是用户第一次打开页面。