2-5 cookie插件——cookie
本节编程练习不计算学习进度，请电脑登录imooc.com操作

cookie插件——cookie

使用cookie插件后，可以很方便地通过cookie对象保存、读取、删除用户的信息，还能通过cookie插件保存用户的浏览记录，它的调用格式为：

保存：$.cookie(key，value)；读取：$.cookie(key)，删除：$.cookie(key，null)

其中参数key为保存cookie对象的名称，value为名称对应的cookie值。

例如，当点击“设置”按钮时，如果是“否保存用户名”的复选框为选中状态时，则使用cookie对象保存用户名，否则，删除保存的cookie用户名，如下图所示：

在浏览器中显示的效果：

从图中可以看出，由于在点击“设置”按钮时，选择了保存用户名，因此，输入框中的值被cookie保存，下次打开浏览器时，直接获取并显示保存的cookie值。

任务

我来试试，亲自使用cookie插件保存用户输入的邮箱信息

在下列代码的第28、32、37行，使用cookie插件读取、保存、删除用户输入的邮箱信息。

index.htmlstyle.css 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3.     <head>
  4.         <title>cookie插件</title>
  5.         <link href="style.css" rel="stylesheet" type="text/css" />
  6.         <script type="text/javascript" src="http://www.imooc.com/data/jquery-1.8.2.min.js"></script>
  7.         <script src="http://www.imooc.com/data/jquery.cookie.js" type="text/javascript"></script>
  8.     </head>
  9.  
  10.     <body>
  11.         <div id="divtest">
  12.             <div class="title">
  13.                 <span class="fl">cookie插件</span> 
  14.                 <span class="fr">
  15.                     <input id="btnSet" type="button" value="设置" />
  16.                 </span>
  17.             </div>
  18.             <div class="content">
  19.                 <span class="fl">邮箱：</span><br />
  20.                 <input id="email" name="email" type="text" /><br />
  21.                 <input id="chksave" type="checkbox" />是否保存邮箱
  22.             </div>
  23.         </div>
  24.  
  25.         <script type="text/javascript">
  26.             $(function () {
  27.                 if ($.cookie("email")) {
  28.                     $("#email").val(?);
  29.                 }
  30.                 $("#btnSet").bind("click", function () {
  31.                     if ($("#chksave").is(":checked")) {
  32.                         ?, {
  33.                             path: "/", expires: 7
  34.                         })
  35.                     }
  36.                     else {
  37.                         ?, {
  38.                             path: "/"
  39.                         })
  40.                     }
  41.                 });
  42.             });
  43.         </script>
  44.     </body>
  45. </html>
  1. #divtest
  2. {
  3.     width: 282px;
  4. }
  5. #divtest .title
  6. {
  7.     padding: 8px;
  8.     background-color: Blue;
  9.     color: #fff;
  10.     height: 23px;
  11.     line-height: 23px;
  12.     font-size: 15px;
  13.     font-weight: bold;
  14. }
  15. #divtest .content
  16. {
  17.     padding: 8px 0px;
  18.     background-color: #fff;
  19.     font-size: 13px;
  20. }
  21. .fl
  22. {
  23.     float: left;
  24. }
  25. .fr
  26. {
  27.     float: right;
  28. }
下一节