cookie,简单的理解。就是存储数据。通过cookie,数据可以长期保存,不随着浏览器的关闭而消失。
需要注意的是,同一台PC,不同浏览器之间,存放cookie的位置是不相同的,即使是在同一个浏览器中,因为cookie是以域名的形式存储,所以不同网站之间的cookie也是有区分的。当然,一个域名下存放cookie个数的多少、每个cookie所能存放内容的大小都是有限制的,不同的浏览器对此均有不同的设定。一条cookie语句只能添加一个cookie,即一个名值对,多条cookie需要多次添加。
cookie的使用:
cookie的使用一共分为三部分,添加cookie,获取cookie,删除cookie。
1.添加cookie:cookie默认临时存储,过期时间为当前时刻,在你关闭浏览器进程的时候就会自动消失,所以你需要在生成cookie的同时设置一个过期时间。
语法:document.cookie=’age=20; expires=datas’;
此语句添加了一条cookie,赋值语句的右边要确保为字符串形式。当第一个名值对中存在中文及特殊字符时,可能会显示异常,所以cookie的内容最好以编码的形式存放。通过编码与解码可以顺利存储和显示所有结果。expires设置过期时间。通过下面的例子可以更好的理解cookie的添加。
var set_time=new Date();
set_time.setDate(set_time.getDate()+d); //首先获取当前日期为本月的第几天,再设置过期时间
document.cookie=’username=’+encode(joe\n你好)+’;expires=‘+set_time.toGMTString(); //将date格式转换为字符串格式
2.获取cookie:所有的cookie都是通过一个分号+空格的形式串联起来的。通过document.cookie来获取当前网站下的cookie的时候,得到的是字符串形式的值,它包含了当前网站下的所有cookie。想要获取每条cookie的名字,首先需要对每条cookie进行处理。注意观察下面给出的具体应用中获取cookie的方法。
3.删除cookie:将cookie的过期时间设置为过去的时间,即可删除此条cookie。
下面给出一个具体应用:
html部分:
<body>
<input type="text" id="username"/>
<input type="button" value="登录" id="login"/>
<input type="button" value="删除" id="del"/>
</body>
js部分::
window.onload=function(){
var Login=document.getElementById("login");
var Del=document.getElementById("del");
var oUsername=document.getElementById("username");
if(getCookie(‘username‘)){
oUsername.value=getCookie(‘username‘);
}
Login.onclick=function(){
alert(‘登录成功‘);
setCookie(‘username‘,oUsername.value,5);
}
Del.onclick=function(){
removeCookie(‘username‘);
oUsername.value=‘‘; //良好用户体验,删除cookie,用户名置空,为可编辑状态
}
}
//添加cookie
function setCookie(key, value, t){ //name=joe:key为name,joe为value,t为过期时间
var clearDate=new Date();
clearDate.setDate( clearDate.getDate() + t);
document.cookie= key + ‘=‘ + value + ‘;expires=‘ + clearDate.toUTCString(); //时间对象转为字符串形式
}
//获取cookie
function getCookie(key){ //cookie形式:name=joe; age=20;...
var arr1=document.cookie.split(‘; ‘); //将cookie字符串以;分割为数组,[name=joe],[age=20],...
for(var i=0; i<arr1.length; i++){ //对上面的数组成员进行遍历
var arr2 = arr1[i].split(‘=‘); //将上面数组的每个成员以=为间隔再次分割为数组arr2
if(arr2[0] == key){ //此时的arr2中有2个成员,然后对arr2的第一个数组元素进行匹配
return decodeURI(arr2[1]); //当符合条件,则以解码形式返回arr2的第二个成员,即键值对的值;
}
}
}
//删除cookie
function removeCookie(key){
setCookie(key, ‘‘ ,-1); //时间设置为过去的时间,即可删除
}