cookie

一、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 记录用户名实例

posted @ 2015-05-14 16:30  Eve0803  阅读(164)  评论(0编辑  收藏  举报