1.什么是cookie?
给网站保存一些信息在客户端。
-比如:自动登录,记录用户名
2.cookie特性
- 同一个网站中所有页面共享一套cookie,比如进入一个页面的主页,再进入一个版块,就不用重新登录的。
- 数量(1个服务器最多向1个浏览器保存20个Cookie,1个浏览器最多可以保存300个Cookie),大小有限(<=4KB)
- 过期时间(js可以控制的)
关于cookie和网页缓存的区别?
缓存:是缓存读取过的页面,包括html,js,css,一些图片,此外缓存是不受js控制的
cookie:就是纯粹地用来存储一些,用户名啊,字符串等等,cookie是完全受js控制的。
注意:cookie和AJAX一样只能在服务器环境下运行,所以需要架设服务器。但火狐浏览器可以在本地测试cookie的,不用架设服务器。
3.JS中的cookie
在JS中,cookie是document的一个属性。
document.cookie
(1)设置cookie
- 格式:名字=值(=意味着添加,不是赋值。如果重复的用document.cookie,则前面的不会覆盖后面的。)
- 不会覆盖
- 过期时间:expires=时间(如果没有指定过期时间,这个时间默认就是到浏览器窗口关闭为止。)
》 日期对象的使用。
- 封装函数
var oDate=new Date(); oDate.setDate(oDate.getDate()+30);//设置失效时间是在30天以后。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>cookie</title> <script> document.cookie="user=blue"; document.cookie="pass=123"; alert(document.cookie); </script> </head> <body> </body> </html>
可以设置cookie的过期时间,不同的cookie可以分别设置指定的过期时间,而且expires是内部状态,就算设置了,也不会再界面中显示出来的。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>cookie</title> <script> var oDate=new Date(); oDate.setDate(oDate.getDate()+30); document.cookie="user=blue;expires="+oDate; document.cookie="pass=123"; alert(document.cookie); </script> </head> <body> </body> </html>
封装函数setCookie(name,value,iDay){} 这是往cookie中存。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>cookie</title> <script> function setCookie(name,value,iDay){ var oDate=new Date(); oDate.setDate(oDate.getDate()+30); document.cookie=name+"="+value+";expires="+oDate; } setCookie('username','abc',30); setCookie('password','123456',30); </script> </head> <body> </body> </html>
(2)获取cookie
要把cookie里面的东西取出来getCookie(name){}
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>cookie</title> <script> function setCookie(name,value,iDay){ var oDate=new Date(); oDate.setDate(oDate.getDate()+30); document.cookie=name+"="+value+";expires="+oDate; } setCookie('username','abc',30); setCookie('password','123456',30); function getCookie(name){ /*username=abc; password=123456 cookie里面的信息是以这样的形式存储的*/ var arr=document.cookie.split('; '); console.log(arr); var i=0; /*arr-->['username=abc','password=123456']*/ for(i=0;i<arr.length;i++){ //再次把切割成这种形式,arr2-->['username','abc'] var arr2=arr[i].split('='); console.log(arr2); if(arr2[0]==name){ return arr2[1]; } } return '';//什么都没找到 } alert(getCookie('password')); /*alert(getCookie('username'));*/ </script> </head> <body> </body> </html>
(3)删除cookie
如何删除cookie?removeCookie(name){}
function removeCookie(name){ setCookie(name,'1',-1);//第二个参数可以随意设置,重点是在第三个参数,-1,表示昨天就过期了,那当然就过期了。 } alert(getCookie('username')); removeCookie('username'); alert(getCookie('username'));
4.cookie的使用
栗子1:
说明:用cookie记录上一次DIV的的位置
鼠标抬起——记录位置
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> <style> #div1 {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 ()//页面刚加载进来的时候,读取cookie { var oDiv=document.getElementById('div1'); var disX=0; var disY=0; var x=getCookie('x'); var y=getCookie('y'); if(x)//第一次加载页面的时候是没有cookie的,所以要先判断一下。 { 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 ()//鼠标抬起的时候存储DIV的位置 { 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>
栗子2:用cookie记录上次登录的用户名
提交时——记录用户名
window.onload——读取用户名
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>记住用户名1</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.miaov.com/"> 用户名:<input type="text" name="user"/> 密码:<input type="password" name="pass"/> <input type="submit" value="登录"/> <a href="javascript:;">清除记录</a> </form> </body> </html>