JavaScript设置cookie、读取cookie、删除cookie详解

JS设置cookie、读取cookie、删除cookie

1. JS设置cookie：

假设在A页面中要保存变量$(‘#username’).val()的值到cookie中,key值为username，则相应的JS代码为：

document.cookie = 'username =' + $('#username').val();

例子：设置username=’aaa’的cookie

document.cookie = 'username = aaa';
document.cookie="userId=828; userName=hulk";

不是覆盖 是增加：

document.cookie="userId=828";
document.cookie="userName=hulk";

2.JS读取cookie：

假设cookie中存储的内容为：username =jack;password=123

function getCookie(cookie_name){
var allcookies = document.cookie;
var cookie_pos = allcookies.indexOf(cookie_name);
if (cookie_pos != -1){
cookie_pos += cookie_name.length + 1;
var cookie_end = allcookies.indexOf(";", cookie_pos);
if (cookie_end == -1){
cookie_end = allcookies.length;
}
var value = unescape(allcookies.substring(cookie_pos, cookie_end));
}
return value;
}
getCookie(username)  ==> jack
getCookie(password)  ==> 123

3. 删除cookie：

为了删除一个cookie，可以将其过期时间设定为一个过去的时间，例如：

<script language="JavaScript" type="text/javascript">
function deleteCookie(name){
//获取当前时间
var date=new Date();
//将date设置为过去的时间
date.setTime(date.getTime()-10000);
//将userId这个cookie删除
//document.cookie="userId=828; expire="+date.toGMTString();
document.cookie=name+"=v; expires="+date.toGMTString();

}
deleteCookie("aaa")   //删除aaa的cookie
</script>

4.给cookie设置终止日期：

设置为10天后过期，可以这样实现：

<script language="JavaScript" type="text/javascript">
//获取当前时间
var date=new Date();
var expireDays=10;
//将date设置为10天以后的时间
date.setTime(date.getTime()+expireDays*24*3600*1000);
//将userId和userName两个cookie设置为10天后过期
document.cookie="userId=828; userName=hulk; expire="+date.toGMTString();
</script>

5. 判断是否有保存用户名的cookie：

function isCookie(key) {
var strCookie = document.cookie;
strCookie = strCookie.split('; ');
for (var i = 0, l = strCookie.length; i < l; i++) {
var att = strCookie[i].split('=');
if (att[0] == key) {
return att[1]
};
};
return false
}

isCookie('userId');          // 判断是否有保存userld的cookie   存在返回true， 不存在返回false
isCookie('userName');        // 判断是否有保存userName的cookie

方法封装

//设置cookie
function setCookie(cname, cvalue, exdays) {
var d = new Date();
d.setTime(d.getTime() + (exdays*24*60*60*1000));
var expires = "expires="+d.toUTCString();
document.cookie = cname + "=" + cvalue + "; " + expires;
}

//获取cookie
function getCookie(cname) {
var name = cname + "=";
var ca = document.cookie.split(';');
for(var i=0; i<ca.length; i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1);
if (c.indexOf(name) != -1) return c.substring(name.length, c.length);
}
return "";
}

//清除cookie
function clearCookie(name) {
setCookie(name, "", -1);
}

jquery.cookie.js 插件

插件地址：http://apps.bdimg.com/libs/jquery.cookie/1.4.1/jquery.cookie.js

/**记住帐号密码**/
if ($("#checkbox").is(":checked")) {
$.cookie("rmbUser", "true", {
expires: 7
}); //存储一个带7天期限的cookie
$.cookie("username", userName, {
expires: 7
});
$.cookie("password", userPwd, {
expires: 7
});
} else {
$.cookie("rmbUser", "false", {
expire: -1
});
$.cookie("username", "", {
expires: -1
});
$.cookie("password", "", {
expires: -1
});
}

调用模版

//设置cookie
function setCookie(name, value, seconds) {
seconds = seconds || 0;   //seconds有值就直接赋值，没有为0，这个根php不一样。
var expires = "";
if (seconds != 0 ) {      //设置cookie生存时间
var date = new Date();
date.setTime(date.getTime()+(seconds*1000));
expires = "; expires="+date.toGMTString();
}
document.cookie = name+"="+escape(value)+expires+"; path=/";   //转码并赋值
}

//取得cookie
function getCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');    //把cookie分割成组
for(var i=0;i < ca.length;i++) {
var c = ca[i];                      //取得字符串
while (c.charAt(0)==' ') {          //判断一下字符串有没有前导空格
c = c.substring(1,c.length);      //有的话，从第二位开始取
}
if (c.indexOf(nameEQ) == 0) {       //如果含有我们要的name
return unescape(c.substring(nameEQ.length,c.length));    //解码并截取我们要值
}
}
return false;
}

//清除cookie
function clearCookie(name) {
setCookie(name, "", -1);
}

//调用一下上面方法：
setCookie("test","tank",1800);   //设置cookie的值，生存时间半个小时
alert(getCookie('test'));        //取得cookie的值，显示tank
clearCookie("test");             //删除cookie的值
alert(getCookie('test'));        //test对应的cookie值为空，显示为false.就是getCookie最后返的false值。