//---------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{ 10px;height: 10px;position: absolute;background: red;display: none;} 9 form{ 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>