Cookie，有时也用其复数形式Cookies，指某些网站为了辨别用户身份、进行session跟踪而储存在用户本地终端上的数据（通常经过加密）。定义于RFC2109（已废弃），最新取代的规范是RFC2965。
下面的代码可以返回设置的cookie，在火狐浏览器下，可以查看浏览器的所有cookie，并且可以进行管理。expires用来赋予过期时间。
1 <script> 2 var oDate=new Date(); 3 oDate.setDate(oDate.getDate()+30); 4 document.cookie="user=paxster;expires="+oDate; 5 document.cookie="password=123456"; 6 alert(document.cookie); 7 </script>
设置cookie函数
1 <script> 2 function setCookie(name,value,iDay)//第一个参数是cookie的名字，第二个是cookie的值，第三个是过期时间。 3 { 4 var oDate=new Date(); 5 oDate.setDate(oDate.getDate()+iDay);//setDate是一个方法，可以设置时间，但是系统时间并不会改变 6 document.cookie=name+'='+value+';expires='+oDate; 7 }; 8 setCookie('username','paxster',20); 9 </script>
获取cookie函数
1 function getCookie(name)//参数为cookie的名字 2 { 3 //'username=abc; password=123456; aaa=123; bbb=4r4er' 4 var arr=document.cookie.split('; ');//把cookie的分号分割 5 var i=0; 6 7 //arr->['username=abc', 'password=123456', ...] 8 9 for(i=0;i<arr.length;i++) 10 { 11 //arr2->['username', 'abc'] 12 var arr2=arr[i].split('=');//再次分割，删除等号 13 14 if(arr2[0]==name) 15 { 16 return arr2[1];//如果存在第一个值，那么返回后面的值 17 } 18 } 19 20 return ''; 21 }
删除cookie函数
1 function removeCookie(name) 2 { 3 setCookie(name, '1', -1);//把过期时间设置为-1，来删除cookie 4 }
用户名下次登录保存
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>无标题文档</title> 6 <script> 7 function setCookie(name, value, iDay) 8 { 9 var oDate=new Date(); 10 11 oDate.setDate(oDate.getDate()+iDay); 12 13 document.cookie=name+'='+value+';expires='+oDate; 14 } 15 16 function getCookie(name) 17 { 18 //'username=abc; password=123456; aaa=123; bbb=4r4er' 19 var arr=document.cookie.split('; '); 20 var i=0; 21 22 //arr->['username=abc', 'password=123456', ...] 23 24 for(i=0;i<arr.length;i++) 25 { 26 //arr2->['username', 'abc'] 27 var arr2=arr[i].split('='); 28 29 if(arr2[0]==name) 30 { 31 return arr2[1]; 32 } 33 } 34 35 return ''; 36 } 37 38 function removeCookie(name) 39 { 40 setCookie(name, '1', -1); 41 } 42 ------------------引入上面的三个函数--------------------------------------- 43 window.onload=function () 44 { 45 var oForm=document.getElementById('form1'); 46 var oUser=document.getElementsByName('user')[0]; 47 var oBtnClear=document.getElementsByTagName('a')[0];//获取元素 48 49 oForm.onsubmit=function ()//保存cookie---表单的提交事件 50 { 51 setCookie('user', oUser.value, 30); 52 }; 53 54 oUser.value=getCookie('user'); 55 56 oBtnClear.onclick=function ()//删除cookie---a标记的单击事件 57 { 58 removeCookie('user'); 59 oUser.value=''; 60 }; 61 }; 62 </script> 63 </head> 64 65 <body> 66 <form id="form1" action="http://www.miaov.com/"> 67 用户名：<input type="text" name="user" /> 68 密码：<input type="password" name="password" /> 69 <input type="submit" value="登录" /> 70 <a href="javascript:;">清除记录</a> 71 </form> 72 </body> 73 </html>
拖拽+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 <style> 5 #div1 {width:100px; height:100px; background:red; position:absolute;} 6 </style> 7 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 8 <title>无标题文档</title> 9 <script> 10 function setCookie(name, value, iDay) 11 { 12 var oDate=new Date(); 13 14 oDate.setDate(oDate.getDate()+iDay); 15 16 document.cookie=name+'='+value+';expires='+oDate; 17 } 18 19 function getCookie(name) 20 { 21 //'username=abc; password=123456; aaa=123; bbb=4r4er' 22 var arr=document.cookie.split('; '); 23 var i=0; 24 25 //arr->['username=abc', 'password=123456', ...] 26 27 for(i=0;i<arr.length;i++) 28 { 29 //arr2->['username', 'abc'] 30 var arr2=arr[i].split('='); 31 32 if(arr2[0]==name) 33 { 34 return arr2[1]; 35 } 36 } 37 38 return ''; 39 } 40 41 function removeCookie(name) 42 { 43 setCookie(name, '1', -1); 44 } 45 46 window.onload=function () 47 { 48 var oDiv=document.getElementById('div1'); 49 var disX=0; 50 var disY=0; 51 52 var x=getCookie('x'); 53 var y=getCookie('y'); 54 55 if(x) 56 { 57 oDiv.style.left=x+'px';//把cookie获取的参数传过来 58 oDiv.style.top=y+'px'; 59 } 60 61 oDiv.onmousedown=function (ev) 62 { 63 var oEvent=ev||event; 64 65 disX=oEvent.clientX-oDiv.offsetLeft; 66 disY=oEvent.clientY-oDiv.offsetTop; 67 68 document.onmousemove=function (ev) 69 { 70 var oEvent=ev||event; 71 72 oDiv.style.left=oEvent.clientX-disX+'px'; 73 oDiv.style.top=oEvent.clientY-disY+'px'; 74 }; 75 76 document.onmouseup=function () 77 { 78 document.onmousemove=null; 79 document.onmouseup=null; 80 81 setCookie('x', oDiv.offsetLeft, 5); 82 setCookie('y', oDiv.offsetTop, 5); 83 }; 84 85 return false; 86 }; 87 }; 88 </script> 89 </head> 90 91 <body> 92 <div id="div1"> 93 </div> 94 </body> 95 </html>