js中实现cookie的增删改查(document.cookie的使用详情)

一、设置cookie的值

1、每个cookie都是一个名称/值对，名称/值对用等号连接，并将该名称/值对赋值给document.cookie即可。如：document.cookie="id=77";

2、如果要一次存储多个名称/值对，可以使用分号加空格隔开。如：document.cookie="id=77; name=bill";

在cookie的名或值中不能使用分号（;）、逗号（,）、等号（=）以及空格。如果想存入这些值，我们可以使用escape()函数进行编码，它能将一些特殊符号使用十六进制表示，例如空格将会编码为“%20”，从而可以存储于cookie值中。

例如：

document.cookie="str="+escape("Hello World");

相当于：

document.cookie="str=Hello%20World";

当使用escape()编码后，在取出值以后需要使用unescape()进行解码才能得到原来的cookie值。

3、document.cookie可以赋不同的值，如：

document.cookie="id=77";

document.cookie="name=bill";

这时浏览器将维护两个cookie，分别是id和name

二、修改cookie的值

如果要改变一个cookie的值，只需重新赋值，例如：document.cookie="id=88";

这样cookie中id的值就变成成了88

三、获取cookie的值

cookie的值可以由document.cookie直接获得：var strCookie=document.cookie;

如果是一次存入多个名称/值对，可以将获取到的字符串进行遍历。

例：//添加cookie

document.cookie="id=77; name=bill";

//获取存入到cookie的值,strCookie的值就为 id=77;name=bill

var strCookie=document.cookie;

//写个方法进行遍历

function getCookieValue(name) {

var strCookie=document.cookie;

var arrCookie=strCookie.split(";");

for(var i=0;i<arrCookie.length;i++){

var c=arrCookie[0].split("=");

if(c[0]==name){

return c[1];

}

}

return "";

}

该方法可以根据存入cookie的名称，获取对应的值。如getCookieValue("name"),得到结果就是bill

四、给cookie设置终止时间

cookie都是单会话的，即浏览器关闭后这些cookie将会丢失，事实上这些cookie仅仅是存储在内存中，而没有建立相应的硬盘文件。

在实际开发中，cookie常常需要长期保存，例如保存用户登录的状态。这可以用下面的选项来实现：

document.cookie="userId=828; expires=GMT_String";

这样可以设置cookie在这个时间内都是有效的。

例：设置cookie的有效时间是10分钟

//获取当前时间

var date=new Date();

var expireDays=10;

//将date设置为10天以后的时间

date.setTime(date.getTime()+expireDays*60*1000);

//将id和name两个cookie设置为10天后过期

document.cookie="id=77; name=bill; expires="+date.toUTCString();

五、删除cookie

直接将cookie的有效时间设置成过去即可。如

var date=new Date();

date.setTime(date.getTime()-1000)

document.cookie="id=77; name=bill; expires="+date.toUTCString();