封装一个对cookie操作的模块

废话不说直接上代码

cookie.js

点击查看代码

const set = (name,value,{maxAge,domain,path,secure} = {}) => {
    let cookieStr = `${encodeURIComponent(name)} = ${encodeURIComponent(value)}`;
    
    if(typeof maxAge == 'number'){
        cookieStr += `; max-age = ${maxAge}`;
    }
    if(domain){
        cookieStr += `; domain = ${domain}`;
    }
    if(path){
        cookieStr += `; path = ${path}`;
    }
    if(typeof secure == 'boolean'){
        if(secure == true)
            cookieStr += '; secure';
    }

    console.log(cookieStr);
    document.cookie = cookieStr;
    return true;
}

const get = name => {
    name = encodeURIComponent(name);
    const cookieArray = document.cookie.split('; ');

    for (const item of cookieArray) {
        const [cookieName,cookieValue] = item.split('=');
        if(cookieName == name){
            return decodeURIComponent(cookieValue);
        }
    }
    return false;
}

const remove = (name,{domain,path} = {}) => {
    if(name == undefined||domain == undefined || path == undefined){
        // console.log(name);
        // console.log(domain);
        // console.log(path);

        return false;
    }
    name = encodeURIComponent(name);
    return set(name,'',{
        domain,
        path,
        maxAge:-1,
    });
}

export {set,get,remove}

html展示

点击查看代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cookie的封装</title>
</head>
<body>
    <script type="module">
        import {set,get,remove} from './cookie.js'

        set('user','lsh');
        set('用户','李世海');
        set('年龄','永远的18岁！',{
            maxAge:999999999,
        });
        set('secure','value',{
            secure:true,
        })

        // 展示出来
        const userH2 = document.createElement('h2');
        const userChineseH2 = document.createElement('h2');
        const ageChineseH2 = document.createElement('h2');
        const secureH2 = document.createElement('h2');
        // 挂载节点
        const boday = document.getElementsByTagName('body')[0];

        remove('user',{
            domain:'127.0.0.1',
            path:'/',
            
        })
        userH2.innerText = get('user');
        userChineseH2.innerText = get('用户');
        ageChineseH2.innerText = get('年龄');
        secureH2.innerText = get('sevure');

        boday.appendChild(userH2);
        boday.appendChild(userChineseH2);
        boday.appendChild(ageChineseH2);
        boday.appendChild(secureH2);


    </script>
</body>
</html>

总结

原生方式

添加
document.cookie = 'name=lsh; max-age=9999; domain=.taobao.com; path=/posts; secure'
document.cookie = '名=值; 属性名=属性值; 属性名=属性值; 属性名=属性值; secure'
secure 只要写上属性名就生效
doamin 值中的.taobao.com和taobao.com作用不同，.taobao.com代表以taobao.com为根域名的二、三级域名都可以访问，taobao.com仅仅代表自身
path 值中的/pages和/pages/作用相同，但不视为同一（名/值）对，可同时存在
max-age = -1或0，可removecookie中对应的那一项

cookie中name，domain，path三者相同视为替换