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.οnlοad=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.οnmοusedοwn=function (ev)
{
var oEvent=ev||event;
disX=oEvent.clientX-oDiv.offsetLeft;
disY=oEvent.clientY-oDiv.offsetTop;
document.οnmοusemοve=function (ev)
{
var oEvent=ev||event;
oDiv.style.left=oEvent.clientX-disX+'px';
oDiv.style.top=oEvent.clientY-disY+'px';
};
document.οnmοuseup=function ()//鼠标抬起的时候存储DIV的位置
{
document.οnmοusemοve=null;
document.οnmοuseup=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.οnlοad=function(){
var oForm=document.getElementById('form1');
var oUser=document.getElementsByName('user')[0];
var oBtnClear=document.getElementsByTagName('a')[0];
oForm.οnsubmit=function(){
setCookie('user',oUser.value,30);
};
oUser.value=getCookie('user');//为了能让下一次刷新的时候,能出来用户名
oBtnClear.οnclick=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>