cookie基础
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 {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 ()//页面刚加载进来的时候，读取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>
