标签：
一、cookie基础
document.cookie=‘blue‘;
alert(document.cookie);
可以运行火狐浏览器查看cookie信息，如果不指定过期时间，默认到到浏览器关闭为止
指定过期时间如下：
var oDate=new Date(); oDate.setDate(oDate.getDate()+30); document.cookie="user=blue;expires="+oDate; document.cookie="pass=123"; alert(document.cookie);
3.查看：document.cookie
function setCookie(name, value, iDay) { var oDate=new Date(); oDate.setDate(oDate.getDate()+iDay); document.cookie=name+‘=‘+value+‘;expires=‘+oDate; }
–格式：名字=值
function getCookie(name) { //‘username=abc; password=123456; aaa=123; bbb=4r4er‘ var arr=document.cookie.split(‘; ‘); var i=0; //arr->[‘username=abc‘, ‘password=123456‘, ...] for(i=0;i<arr.length;i++) { //arr2->[‘username‘, ‘abc‘] var arr2=arr[i].split(‘=‘); if(arr2[0]==name) { return arr2[1]; } } return ‘‘; }
function removeCookie(name) { setCookie(name, ‘1‘, -1); }
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <style> #div1 {width:100px; height:100px; background:red; position:absolute;} </style> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <script> function setCookie(name, value, iDay) { var oDate=new Date(); oDate.setDate(oDate.getDate()+iDay); document.cookie=name+‘=‘+value+‘;expires=‘+oDate; } function getCookie(name) { //‘username=abc; password=123456; aaa=123; bbb=4r4er‘ var arr=document.cookie.split(‘; ‘); var i=0; //arr->[‘username=abc‘, ‘password=123456‘, ...] for(i=0;i<arr.length;i++) { //arr2->[‘username‘, ‘abc‘] var arr2=arr[i].split(‘=‘); if(arr2[0]==name) { return arr2[1]; } } return ‘‘; } function removeCookie(name) { setCookie(name, ‘1‘, -1); } window.onload=function () { var oDiv=document.getElementById(‘div1‘); var disX=0; var disY=0; var x=getCookie(‘x‘); var y=getCookie(‘y‘); if(x) { oDiv.style.left=x+‘px‘; oDiv.style.top=y+‘px‘; } oDiv.onmousedown=function (ev) { var oEvent=ev||event; disX=oEvent.clientX-oDiv.offsetLeft; disY=oEvent.clientY-oDiv.offsetTop; document.onmousemove=function (ev) { var oEvent=ev||event; oDiv.style.left=oEvent.clientX-disX+‘px‘; oDiv.style.top=oEvent.clientY-disY+‘px‘; }; document.onmouseup=function () { document.onmousemove=null; document.onmouseup=null; setCookie(‘x‘, oDiv.offsetLeft, 5); setCookie(‘y‘, oDiv.offsetTop, 5); }; return false; }; }; </script> </head> <body> <div id="div1"> </div> </body> </html>
»鼠标抬起——记录位置
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <script> function setCookie(name, value, iDay) { var oDate=new Date(); oDate.setDate(oDate.getDate()+iDay); document.cookie=name+‘=‘+value+‘;expires=‘+oDate; } function getCookie(name) { //‘username=abc; password=123456; aaa=123; bbb=4r4er‘ var arr=document.cookie.split(‘; ‘); var i=0; //arr->[‘username=abc‘, ‘password=123456‘, ...] for(i=0;i<arr.length;i++) { //arr2->[‘username‘, ‘abc‘] var arr2=arr[i].split(‘=‘); if(arr2[0]==name) { return arr2[1]; } } return ‘‘; } function removeCookie(name) { setCookie(name, ‘1‘, -1); } window.onload=function () { var oForm=document.getElementById(‘form1‘); var oUser=document.getElementsByName(‘user‘)[0]; var oBtnClear=document.getElementsByTagName(‘a‘)[0]; oForm.onsubmit=function () { setCookie(‘user‘, oUser.value, 30); }; oUser.value=getCookie(‘user‘); oBtnClear.onclick=function () { removeCookie(‘user‘); oUser.value=‘‘; }; }; </script> </head> <body> <form id="form1" action="http://www.baidu.com/"> 用户名：<input type="text" name="user" /> 密码：<input type="password" name="pass" /> <input type="submit" value="登录" /> <a href="javascript:;">清除记录</a> </form> </body> </html>
1. 什么是 cookie、cookie 特性
2. js 中的 cookie：设置 document.cookie
3. cookie 不会覆盖
4. cookie 过期时间：expires、setDate
5. 封装设置 cookie 函数
6. 封装获取 cookie 函数
7. 封装删除 cookie 函数
8. cookie 接合拖拽实例
9. cookie 记录用户名实例
标签：
原文地址：http://www.cnblogs.com/eveblog/p/4503681.html
