JS操作cookie

JS操作cookie

cookie是通过键值对的形式来存储数据的（key=value）
js对cookie的操作直接使用 document.cookie = …

添加cookie

document.cookie = "cookie的名字(即key)" + "=" + "cookie中要存储的内容(即value)";
//如下其实也是一样的
document.cookie = "cookie的名字(即key) =cookie中要存储的内容(即value) ";

上面仅是添加了一个cookie，对于cookie的存活时间没有进行设置，会自动采用默认的失效时间，即当浏览器关闭时就删除这个cookie。
如果想要cookie能在浏览器中保存一段时间，就需要设置该cookie的最大生命长度，或者设置其失效的时间。同时还要将浏览器设置中的退出浏览器就清除cookie的选项关闭。

修改某个cookie

和添加cookie其实是一样的，会自动判断key是否已经存在，如果存在了就修改value，不存在就添加，与hashMap是一样的道理。

document.cookie = " aa = Value1 ";//添加了一个key 为aa 的cookie，他的值是Value1
document.cookie = " aa = Value2 ";//修改了key 为aa 的cookie的值，改为了Value2
document.cookie = " aa =";//修改为了空值

cookie的存活时间设置
（1）通过设置最大生命长度属性（max-age）:

//设置方式就是在cookie添加时，写完value之后，用分号隔开，
//将max-age属性的值设置好，如下设置最大生命长度为一天
document.cookie = "cookie的名字(即key)" + "=" + "cookie中要存储的内容(即value)" + ";"
+ "max-age" + "=" + 1*24*60*60;
//如下也是一样的效果
document.cookie = "cookie的名字(即key)=cookie中要存储的内容(即value);max-age=" + 1*24*60*60;

• max-age属性的值如果设置为小于零，则表示cookie为临时cookie，其实就和默认效果是一样的，即在浏览器关闭时删除；

• max-age属性的值如果设置为等于零，则表示立即删除该cookie；

• max-age属性的值如果设置为大于零，表示存活时间；

（2）直接设置cookie的失效时间属性（expires）：

document.cookie = "cookie的名字(即key)=cookie中要存储的内容(即value);expires=" + 失效时间（时间格式为UTC字符串，即date转换成字符串）;
例如：
document.cookie = "cookie的名字(即key)=cookie中要存储的内容(即value);expires=Sun, 31 Dec 2023 12:00:00 UTC";

两种设置cookie存活的方式区别很明显，一个是设置其生命长度，另一个直接设置其失效的时间，根据自己的使用场景挑一种即可。

扩展：UTC时间字符串可以通过 date时间类型对象调用toUTCString()方法获得。

如 ：var nowDate = new Date();

var utcString = nowDate.toUTCString(); 那么设置cookie失效时间就应该按如下方式写：

document.cookie = “cookie的名字(即key)=cookie中要存储的内容(即value);expires=” + utcString;

cookie的删除

在设置cookie存活时间中就已经说明了，直接将max-age属性设置为0即可删除cookie，这样设置cookie就不存在了，还有另一种方式，可以将其失效时间改为一个比当前时间更早的时间，那么这个cookie与被删除了的效果是一样的（但其实cookie还存在，只是没用了而已）。

在做业务中，根据自己的实际情况来写即可。