用JavaScript封装cookie函数，删除指定name属性的cookie，获取指定name属性的cookie_js根据名称清除指定cookie

1.新增cookie

写一个set函数，调用函数时传入name，value，max-age等值来创建一个cookie。

用到了对象的解构赋值，函数的默认值等前置知识点。

const set=(name,value,{maxAge,domain,path,secure}={})=>{
    //为了输入非法的字符串，此时可以用encodeURIComponent进行编码
    let cookieText=`${encodeURIComponent(name)}=${encodeURIComponent(value)}`;
    if(typeof maxAge==="number"){
        cookieText+=`; max-age=${maxAge}`;
    }
    //判断是否传了domain
    if(domain){
        cookieText+=`; domain=${domain}`;
    }
    if(path){
        cookieText+=`; path=${path}`;
    }
    if(secure){
        cookieText+=`; secure`;
    }
    document.cookie=cookieText;
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

调用函数

set('user','alex',{maxAge:5});
set('用户名','蒂娜');
1
2

2.获取cookie

通过cookie的name属性获取对应的value值。非常机智地用有格律的分隔符将cookie字符串分割为了数组。

document.cookie会获取类似如下的字符串：

// username=alex; age=18; gender=male
1

const get=(name)=>{
    //预防传入的中文，先用encodeURI进行编码
    name=encodeURIComponent(name);
    // 把分号+空格作为分隔符，将cookie分割为数组
    const cookies= document.cookie.split('; ');
    // ["username=alex", "age=18", "gender=male"]
    //再将上面的得到的数组用等号分割为数组
    for(let item of cookies){
        let [cookieName,cookieValue]=item.split('=');
        if(cookieName===name){
            //解码
            return decodeURIComponent(cookieValue);
        }
    }
    return;
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

调用封装的set和get函数：

set('user','alex',{maxAge:5});
set('用户名','蒂娜');
console.log(get('用户名')); //蒂娜
console.log(get('user')); //alex
1
2
3
4

3.删除指定cookie

一条cookie得要有name、domain、path三个属性值才能确定，因此要根据name、domain、path删除cookie。此时调用了前面封装好的set函数修改某个cookie的max-age为-1，当max-age的值为0或负数的时候会删除cookie。

const remove=(name,{domain,path}={})=>{
    //当max-age的值为0或负数的时候会删除cookie
    set(name,"",{domain,path,maxAge:-1});
};
1
2
3
4