前端开发中经过js设置cookie的一组方法

咱们在前端开发中，一般都须要获取并记录用户的某些操做设置，这样可使用户下一次访问网站时不用进行重复的调整设置同一个功能。

这次文章中的方法是在前端开发工做中本身随手写的一组经过js设置与获取cookie的方法，可以应用在多说状况下，没作细挖与深究。

 

js方法的完整代码以下：

var cookie = {
    set:function(key,val,time){//设置cookie方法
        var date=new Date(); //获取当前时间
        var expiresDays=time;  //将date设置为n天之后的时间
        date.setTime(date.getTime()+expiresDays*24*3600*1000); //格式化为cookie识别的时间
        document.cookie=key + "=" + val +";expires="+date.toGMTString();  //设置cookie
    },
    get:function(key){//获取cookie方法
        /*获取cookie参数*/
        var getCookie = document.cookie.replace(/[ ]/g,"");  //获取cookie，而且将得到的cookie格式化，去掉空格字符
        var arrCookie = getCookie.split(";")  //将得到的cookie以"分号"为标识 将cookie保存到arrCookie的数组中
        var tips;  //声明变量tips
        for(var i=0;i<arrCookie.length;i++){   //使用for循环查找cookie中的tips变量
            var arr=arrCookie[i].split("=");   //将单条cookie用"等号"为标识，将单条cookie保存为arr数组
            if(key==arr[0]){  //匹配变量名称，其中arr[0]是指的cookie名称，若是该条变量为tips则执行判断语句中的赋值操做
                tips=arr[1];   //将cookie的值赋给变量tips
                break;   //终止for循环遍历
            } 
        }
        return tips;
    }
}

 

下面简单的说明一下设置与获取的方法，便于前端开发新手用户使用

设置cookie的方法为：cookie.set(key,val,time)

key能够理解为cookie的变量名

val能够理解为这个cookie所带有的值

time是cookie的超时时间，单位为天

 

获取cookie的方法为：cookie.get(key)

key就是刚才咱们设置时的cookie变量名

咱们只须要将函数赋值给新的变量便可调用这个值，例如：var n = cookie.get(key);

方法写的不算复杂，比较适合前端开发新手使用。

 

如何调试与查看cookie？

cookie能够经过某些浏览器的开发人员工具进行查看，本文暂以Chrome为例。

打开页面后，能够经过 “右键-> 审查元素 ->resources”，而后以下图中，设置了一个font-size为例，能够查看到变量名、值、和过时时间等信息