//---------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>
时间： 2024-08-05 11:16:16