用户名：
记住上次登陆的时间
您上次登录的时间是：
您上次登录的时间是：
cookie的高级设置
用户设置网页的颜色，浏览器记住用户的选择，下次访问时按用户的设置显示
红色
黄色
绿色
蓝色
1 <html xmlns="http://www.w3.org/1999/xhtml" >
2 <head>
3 <title>Jquery.cookie</title>
4 <script src="../js/jquery-1.4.2.js" type="text/javascript"></script>
5 <script src="../js/jquery.cookie.js" type="text/javascript"></script>
6 <script type="text/javascript">
7 $(function(){
8 //使用jquery.cookie.js调用jquery方法，jquery.cookie.js必须放在jquery-1.4.2.js后面才会生效
9 alert($.cookie("用户名"));
10 $.cookie("用户名","yaoguipeng");
11 })
12
13 //记住用户的登录名，下次登录自动填写用户名
14 $(function(){
15 $("#text1").val($.cookie("username"));
16 $("#login").click(function(){
17 var username = $("#text1").val();
18 $.cookie("username",username);
19 });
20 })
21 //记录上次登录的时间
22 $(function(){
23 $("#lastlogintime").val($.cookie("lastlogintime"));
24 var currentTime = new Date().toLocaleString();
25
26 $.cookie("lastlogintime",currentTime);
27 });
28
29 //cookie的高级设置
30 $(function(){
31 $.cookie("name","value",{expires:7,path:"/",domain:"baidu.com",secure:true});
32 //如果参数domain是：itcast.com,那么mail.baidu.com,map.baidu.com二级域名下的cookie都会被读取
33 //参数path是设置网站的哪些页面能够被读取cookie, baidu.com/root/a/b表示只有a 目录下的网页能被读取cookie
34 });
35
36 $(function(){
37 //用户设置网页的颜色，浏览器记住用户的选择，下次访问时按用户的设置显示
38 });
39 </script>
40 </head>
41 <body>
42 <div>
43 用户名：<input type="text" id="text1" />
44 <input type="button" id="login" value="登录"/>
45 </div>
46 <div>
47 记住上次登陆的时间<br />
48 您上次登录的时间是：<input type="text" id="lastlogintime" style="width:400px"/>
49 </div>
50 <div>
51 cookie的高级设置
52 </div>
53 <div id="divColor">
54 用户设置网页的颜色，浏览器记住用户的选择，下次访问时按用户的设置显示
55 <div id="div1" style="background-color:Red">红色<input type="button" value="修改颜色" id="btnRed"/></div>
56 <div id="div2" style="background-color:Yellow">黄色<input type="button" value="修改颜色" id="btnYellow"/></div>
57 <div id="div3" style="background-color:Green">绿色<input type="button" value="修改颜色" id="btnGreen"/></div>
58 <div id="div4" style="background-color:Blue">蓝色<input type="button" value="修改颜色" id="btnBlue"/></div>
59 </div>
60 </body>
61 </html>
