JS原生实现cookie操作(批量添加、删除、查看)

998 阅读1分钟

自己封装了几个小函数,用来快捷、批量的cookie的添加、删除、查看

批量设置cookie

原理:将需要添加的cookie变成对象,通过遍历对象的方式逐条添加cookie

function setCookie(obj,time){
    for(var key in obj){
        var t = new Date();
        t.setDate(t.getDate + time);
        document.cookie = `${key}=${obj[key]};expires=${t.toGMTString()}`;
    }
}
setCookie({name:'rice',age:99},5);

image.png 这里我的时间单位是日,也可以按需修改,只需要将getDate改变即可

查看cookie

cookie可以使用console.log(document.cookie)的方式查看,我这里的封装的函数可以独立查看每一个cookie的值

function getCookie(){
    var cookie = document.cookie;
    var cookieArr = cookie.match(/[^;=\s]+=([^;=\s]+)(?:;?)/g)
    //给cookie中的每一项值分组,这里使用正则防止非法cookie;确保我们后续操作的cookie是正常值,同时末尾使用非捕获,减轻后续切割末尾项分隔符的负担(其实没啥用,后续直接全都置空了);
    
    var argDate = {}
    for(var key of arguments){
        argDate[key] = 1;
    }
    //这里的作用是遍历我们需要查看的值,并且放在对象里,跟后续跟cookie中实际的值进行对比,如果有就查看,这里arguments获取的是实参列表;
    return cookieArr.reduce(function(acc,curr){
        var tempStr = curr.replace(';','');
        var tempArr = tempStr.splite('=');
        if(argDatep[tempArr[0]] && tempArr[0]){
            //查看实际值和查看值是否同时存在;
            arr[tempArr[0]] = tempArr[1];
        }
        return arr;
    },{})
}
console.log(getCookie('name','age'));

image.png

删除cookie

删除操作和创建操作差不多,手段是将cookie值清空,并且将时间调整为过去,cookie就会自动销毁

function removeCookie(){
    for(var key in arguments){
        var json = {};
        json[arguments[key]] = null;
        setCookie(json,-1);
    }
}
removeCookie('name');

image.png

遍历实参列表,将需要修改的值放置在json数组中,并将他们的值改为null,这样就可以删除cookie了

这里直接在removeCookie里调用setCookie,传入需要清空的值即可