Day9-------cookieForm 

 //---------cookie不同于浏览器缓存，是用来存放用户信息的。使用了提交时加入cookie，删除时移除cookie，完成记录用户希望下次登录保存的账号和密码
 //----尚未完成----做一个照片墙或者拼图，下次用户进入时是以前留下的效果
 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 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <title>cookieForm</title>
 6 </head>
 7 <style type="text/css">
 8     div{width: 10px;height: 10px;position: absolute;background: red;display: none;}
 9     form{width: 200px;height: 200px;background: #FFF;margin: 20px auto;border: 1px solid #CCC;text-align: center;}
10     input{margin-top: 20px;}
11     body{font-size: 15px;}
12 </style>
13 <script type="text/javascript">
14     window.onload=function(){
15         oForm=document.getElementsByTagName('form')[0];
16         oInput=document.getElementsByTagName('input');
17         oDelete=document.getElementsByTagName('a')[0];
18         function addCookie(name,value,time){
19             var oDate=new Date();
20             oDate.setDate(oDate.getDate()+time);
21             document.cookie=name+"="+value+";expires="+oDate;
22         }
23         oForm.onsubmit=function(){
24             addCookie('password',oInput[1].value,30);
25             addCookie('username',oInput[0].value,30);
26         }
27         oDelete.onclick=function(){
28             addCookie('password','bun',-1);
29             addCookie('username','fleshy',-1);
30         }
31         str=document.cookie;        
32         cookieState=str.split('; ');
33         for(count=0;count<cookieState.length;count++){
34             cookieItem=cookieState[count].split('=');
35             if(cookieItem[0]=="username") oInput[0].value=cookieItem[1];
36             if(cookieItem[0]=="password") oInput[1].value=cookieItem[1];
37         }
38     }
39 </script>
40 <body>
41     <form>
42         <input type="text" placeholder="Username">
43         <input type="password" placeholder="Password">
44         <input type="submit" value="submit">
45         <a href="">DeleteCookie</a>
46     </form>
47 </body>
48 </html>

 

posted on 2014-11-28 21:45  fleshy  阅读(181)  评论(0)    收藏  举报

导航