JavaScript篇之缓存cookie的操作

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提供思路帮助,对上述问题不会深入讨论,有兴趣的同学可以留言交流.

本文为原创,如需转载请备注本出处,闭谢

地址:http://write.blog.csdn.net/mdeditor
作者:backOrigin