1. Cookie的作用：
a) 在客户端保存一定的信息；
b) 自动登录、记住用户名等；
2. Cookie和网页缓存:
a) 没有关系；
b) Cookie完全由JS控制；
3. Cookie的特性：
a) 同一个网站中的所有页面共享一套Cookie;
b) Cookie的数量和总体积都是有限的；
c) Cookie有保质期的，过期后自动消失；
4. JS中使用cookie:
a) cookie是document上的一个属性；
b) document.cookie;
c) cookie像银行一样，先要往里存钱，然后才能取钱；
5. 设置cookie:
a) 名字 = 值；document.cookie = "user=aaa";
b) Cookie中等号是添加的意思、不是赋值，添加多个时不会覆盖；
c) 如不指定过期时间，浏览器关闭时就会消失；
d) 过期时间的指定：document.cookie = "user=aaa;expires="+oDate;
e) 每一条cookie都可以有自己独立的过期日期；
f) 封装：setCookie(name, value, iDay);
6. 获取cookie:
a) 两次split分割字符串：
i. 'username=abc; password=123456; aaa=123';
ii. arr->['username=abc', 'passname=123456', ....]
iii. arr2->['username', 'abc']
7. 删除cookie:
a) 将指定name的cookie项的expires =-1;
8. Cookie使用实例：
a) Cookie_结合拖拽：用cookie记录上一次Div的位置
i. 在鼠标抬起时， 记录位置；
ii. 在window.onload时， 读取位置；
b) 用Cookie记录上次登录的用户名：
i. onsubmit： 记录用户名；
ii. window.onload时： 获取用户名；
如果不设置过期时间，则表示这个cookie生命周期为浏览器会话期间，只要关闭浏览器窗口，cookie就消失了。这种生命期为浏览器会话期的cookie被称为会话cookie。会话cookie一般不保存在硬盘上而是保存在内存里。
如果设置了过期时间，浏览器就会把cookie保存到硬盘上，关闭后再次打开浏览器，这些cookie依然有效直到超过设定的过期时间。
cookie包括：name,value,domain,path,expires
cookie.js:
//设置cookie function setCookie(name,value,iDay){ if(iDay){ var oDate = new Date(); oDate.setDate(oDate.getDate()+iDay); document.cookie = name+'='+value+'; PATH=/; EXPIRES='+oDate; }else{ document.cookie = name+'='+value+'; PATH =/'; } } //读取 function getCookie(name){ var arr = document.cookie.split('; '); for(var i = 0;i<arr.length;i++){ if(arr[i].split('=')[0] == name){ return arr[i].split('=')[1]; } } return ''; }
//借刀杀人 function removeCookie(name){ setCookie(name,1,-1); }
选项卡:
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#box .on{ background:red;}
#box div{200px;height:200px; background:#ccc; display:none;}
</style>
<script src='cookie.js'></script>
<script>
window.onload = function(){
var oBox = document.getElementById('box');
var aBtn = oBox.getElementsByTagName('input');
var aDiv = oBox.getElementsByTagName('div');
var count=getCookie('count')||0;
if(count){
tab();
}
for(var i = 0;i<aBtn.length;i++){
(function(index){
aBtn[i].onclick = function(){
count=index;
setCookie('count',count,2);
tab();
}
})(i)
}
function tab(){
for(var i = 0;i<aBtn.length;i++){
aBtn[i].className = '';
aDiv[i].style.display = 'none';
}
aBtn[count].className = 'on';
aDiv[count].style.display = 'block';
};
};
</script>
</head>
<body>
<div id="box">
<input type="button" value="小说" class="on">
<input type="button" value="电影">
<input type="button" value="音乐">
<div style="display:block">梦里花落知道多</div>
<div>寒战2</div>
<div>如果你也听说</div>
</div>
</body>
</html>
拖拽:
<html> <head> <meta charset="utf-8"> <meta name="author" content="智能社 - zhinengshe.com"> <meta name="copyright" content="智能社 - zhinengshe.com"> <title>智能社 - www.zhinengshe.com</title> <style> #div1{100px;height:100px; background:red; position:absolute;left:0; top:0;} </style> <script src="cookie.js"></script> <script> window.onload=function(){ var oBox=document.getElementById("div1"); var x=getCookie('x')||0; //如果是第一次则坐标为0;否则为上一次存储的坐标; var y=getCookie('y')||0; oBox.style.left=x+'px'; oBox.style.top=y+'px'; oBox.onmousedown=function(ev){ var e=ev||event; var disX=e.clientX-oBox.offsetLeft; var disY=e.clientY-oBox.offsetTop; document.onmousemove=function(ev){ var e=ev||event; var l=e.clientX-disX; var t=e.clientY-disY; oBox.style.left=l+'px'; oBox.style.top=t+'px'; } document.onmouseup=function(){ setCookie('x',oBox.offsetLeft,2); //鼠标抬起之后设置oBox位置 setCookie('y',oBox.offsetTop,2); document.onmousemove=null; document.onmouseup=null; oBox.releaseCapture&&oBox.releaseCapture(); } oBox.setCapture&&oBox.setCapture(); return false; } } </script> </head> <body> <div id="div1"></div> </body> </html>
换肤:
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link id='li' rel="stylesheet" href="skin1.css" />
<script src="cookie.js"></script>
<style>
#box{color:#fff}
</style>
<script>
window.onload=function(){
var aInput=document.getElementsByTagName('input');
var oA=document.getElementById('li');
var count=getCookie('count')||0; //开始时取0;后期取前一次存储的值;
oA.href=arr[count];
var arr=['skin1.css','skin2.css','skin3.css'];
for(var i=0;i<aInput.length;i++){
(function(index){
aInput[index].onclick=function(){
count=index; //用于记住当前点击的按钮
setCookie('count',count,2); //设置count到cookie中，用于获取
oA.href=arr[count];
}
})(i)
}
};
</script>
</head>
<body style="height:2000px;">
<div id="box">
<input type="button" value="变蓝" />
<input type="button" value="变红" />
<input type="button" value="变绿" />
</div>
</body>
</html>
记住我:
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="cookie.js"></script>
<script>
window.onload=function(){
var oBtn=document.getElementById("btn");
var oUser=document.getElementById("user");
oBtn.onclick=function(){
if(this.checked){ //如果复选框选中,设置cookie存储,复选框取消,删除cookie;
setCookie('user',oUser.value,2);
}else{removeCookie('user');}
}
if(getCookie('user')){ //如果cookie值存在则让复选框选中,同时让输入框的值为上一次保存的值
oUser.value=getCookie('user');
oBtn.checked=true;
}
}
</script>
</head>
<body>
用户名:<input type="text" id='user'/><br />
<input type="checkbox" id='btn'/>记住我
</body>
</html>