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;
};
调用函数
set('user','alex',{maxAge:5});
set('用户名','蒂娜');
2.获取cookie
通过cookie的name属性获取对应的value值。非常机智地用有格律的分隔符将cookie字符串分割为了数组。
document.cookie会获取类似如下的字符串:
// username=alex; age=18; gender=male
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;
};
调用封装的set和get函数:
set('user','alex',{maxAge:5});
set('用户名','蒂娜');
console.log(get('用户名')); //蒂娜
console.log(get('user')); //alex
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});
};