一、cookie基础
1、什么是cookie
•页面用来保存信息
–比如：自动登录、记住用户名
2、cookie的特性
–同一个网站中所有页面共享一套cookie
–数量、大小有限 一般以k为单位，比如4k.5k
–过期时间 ,使用js来控制
-存在客户端，用户计算机的文件，敏感重要的东西不要放到cookie
-只有在服务器环境下运行
•JS中使用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
二、使用cookie
cookie的使用
•设置cookie
function setCookie(name, value, iDay) { var oDate=new Date(); oDate.setDate(oDate.getDate()+iDay); document.cookie=name+'='+value+';expires='+oDate; }
–格式：名字=值
–不会覆盖
–过期时间：expires=时间
»日期对象的使用
–封装函数
•读取cookie
–字符串分割
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 ''; }
•删除cookie
–已经过期
function removeCookie(name) { setCookie(name, '1', -1); }
cookie的使用
•例子
–用cookie记录上一次Div的位置 cookie结合拖拽
<!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>
»鼠标抬起——记录位置
»window.onload——读取位置
–用cookie记录上次登录的用户名
»提交时——记录用户名
»window.onload——读取用户名
<!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 记录用户名实例