Preface
除了能用php方式操作cookie外,通过纯js的方式也能操作它,当然两者也可以配合使用了,这也算是服务器端的php和客户端的js的一种交互方式吧!
PS: 除了利用 COOKIE 进行数据交互外,还有一种是使用ajax进行数据交互 ^_^
本篇只介绍纯js的方式操作cookie,如果喜欢用jquery,官方也有封装好的cookie类供使用点我传送(第一个显示的就是了)
相关属性 : document.cookie
用js操作cookie 大致分为三步: 读/写/删
(1)读
string document.cookie
//读取cookie 返回整个cookie(类型是字符串)
(2)写(赋值)
document.cookie="a=12";
//a=12以键("a")值("12")对的形式写入cookie中
(3)删除
document.cookie="a=12;expires="+new Date().toGMTString();
//设置a变量的有效期为当前时间
(4)读取的cookie都是一整个字符串?那怎么用?能不能像数组那样?
要自己用js将字符串,切割成数组……或者……..
1.setCookie()
写入新的cookie 我们希望最好能给他一个过期时间exday,(默认是跟随浏览器的)
代码实现:
function setCookie(name,value,exday)
{
//判断传入的参数是否至少为2个,return false otherwise
if(value){
//如果传入了cookie过期时间exday就进入添加日期操作
if(arguments[3]){
var exday = exday*24*60*60*1000;
document.cookie=name+"="+value+";expires="+(new Date().setTime(new Date().getTime()+exday)).toGMTString();
return document.cookie;
//否则直接添加cookie的值
}else{
document.cookie=name+"="+value;
return document.cookie;
}
}
return false;
}
getCookie()
需求:获取cookie,由于document.cookie
返回的是一个字符串,这里我使用强大的正则来匹配到我们需要获取的name
代码实现:
function getCookie(name)
{
//思路分析:
//先用document.cookie输出一个cookie值观察它的格式,,,假设有多个name
// 它的格式为 : a=1; b=2; {......}z=n
//分号与下一个name之间有一个空格,最后一个什么也没有
//现在我们要通过name获取它对应的值,
//这个name的位置只有可能为第一个 或者前面是个空格,-----> /(^| )/
//而这个name的后面必定跟上个/=/号 ------> /(name+"=...")/
//=号后面直到遇到/;/或者结尾/$/的值就是我们需要的 /(;}$)/
//由于值可能不存在所以用特殊符/*/
//综上即为 /(^| )"+name+"=([^;]*)(;|$)/
var result = document.cookie.match(new RegExp("(^| )"+name+"=([^;]*)(;|$)"));
if(result){
//这就是使用match函数的原因,可以轻松获取匹配到的括号中的内容
//由于如果match有返回值,那么返回的数组的下标0对应的值为匹配到的全部字符串,而我们需要的是第二个括号中的值
return result[2];
}else{
return false;
}
}
3.delCookie()
原理:将cookie值的过期时间设置为过去时间
需求:删除cookie可以是删除cookie中某一个name或者删除全部的cookie
代码实现 :
function delCookie(name)
{
//这里我将空参的函数执行为 删除所有的cookie
if(arguments.length==0){
//又用到了强大的正则,这个比上个更好理解
//getCookie函数中我们需要获取的是value,这次我们需要获取的是name
//思路分析 :
//只取cookie字符中的开头部分遇到/=/号就停止匹配
//将这部分用小括号记录起来(内容即位我们需要的name)
//为了以防万一这里添加了name中不能有/[^;]/号
var del_name = document.cookie.match(new RegExp("(^[^;]*)="))
//判断是否匹配到了 ,cookie已经为空otherwise
if(del_name){
//调用有参的delCookie函数删除匹配到name
delCookie(del_name[1]);
//调用无参继续删除(递归思想)
delCookie();
}
}
if(getCookie(name)){
//将过期时间设置为当前时间,即过期了
document.cookie=name+"="+getCookie(name)+";expires="+new Date().toGMTString();
return true;
}else{
return false;
}
}
总结 : 如果涉及到与服务器端交互,那么只设置cookie的值是不行的.否则,如果后端为cookie设置了作用域,这个问题会导致cookie值无法正确删除,这时我们就需要改进一下函数,将cookie路径及域名操作加入.
ps由于本篇仅为学习js操作cookie提供思路帮助,对上述问题不会深入讨论,有兴趣的同学可以留言交流.
本文为原创,如需转载请备注本出处,闭谢