Cookie的封装、Cookie的注意事项

时间:2023-03-24
本文章向大家介绍Cookie的封装、Cookie的注意事项,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

Cookie的封装

  封装Cookie

  使用封装好的Cookie实现网站语言切换

Cookie.html页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Cookie的封装</title>
<!--    <script src="../static/js/jquery-3.6.1.min.js" type="text/javascript" charset="utf-8"></script>-->
<!--    <script src="../static/js/cookie.js" type="text/javascript" charset="utf-8"></script>-->
</head>
<body>
    <button id="cn">中文</button>
    <button id="en">英文</button>

<script type="module">
    // import{set,get,remove} from '../static/js/cookie';
    // import {set,get,remove} from '../static/js/cookie.js';
    // set('username','alex');
    // set('username','zs');
    // set('age',18);
    // set('用户名','张三');

    // set('sex','male',{
    //     maxAge:30*24*3600,
    // })

    // remove('username');
    // remove('用户名')

    // console.log(get('username'));
    // console.log(get('age'));
    // console.log(get('用户名'));
    // console.log(get('sex'));

    // 使用封装好的Cookie实现网站语言切换
    import {set} from '../static/js/cookie.js';
    const cnBtn = document.getElementById('cn');
    const enBtn = document.getElementById('en');

    cnBtn.addEventListener(
        'click',
        () => {
            set('language','cn',{
                maxAge:30 * 24 * 3600
            });
            window.location = 'Cookie.html';
        },
        false
    );

    enBtn.addEventListener(
        'click',
        () => {
            set('language','en',{
                maxAge:30 * 24 * 3600
            });
            window.location = 'Cookie.html';
        },
        false
    );
</script>

</body>
</html>

cookie.js文件

// 写入Cookie
const set = (name,value, {maxAge,domain,path,secure}
 = {}) =>{
    let cookieText = `${encodeURIComponent(name)}=
  ${encodeURIComponent(value)}`;

    if (typeof  maxAge === 'number') {
        cookieText += `; max-age=${maxAge}`;
    }

    if (domain) {
        cookieText += `; domain=${domain}`;
    }

    if (path) {
        cookieText += `; path=${path}`;
    }

    if (secure) {
        cookieText += `; secure`;
    }

    document.cookie = cookieText;

    // document.cookie='username=alex; max-age=5; domain='
};

// 通过name获取cookie的值
const get = name => {
    name = `${encodeURIComponent(name)}`;

    const cookies = document.cookie.split('; ')

    for (const item of cookies) {
        const [cookieName,cookieValue] = item.split('=');

        if (cookieName === name) {
            return decodeURIComponent(cookieValue);
        }
    }
    return;
};

// 'username=alex; age=18; sex=male'
// ['username=alex', 'age=18', 'sex=male']
// ["username","alex"]

// get('用户名');

// 根据name、domain和path删除Cookie
const remove = (name,{domain,path} = {}) =>{
    set(name,'',{domain,path,maxAge:-1});
};

export {set,get,remove};

Cookie的注意事项

  前后端都可以写入和获取Cookie

  Cookie有数量限制

    每个域名下的Cookie数量有限

    当超过单个域名限制之后,再设置Cookie,浏览器就会清除以前设置的Cookie

  Cookie有大小限制

    每个Cookie的存储容量很小,最多只有4KB左右

原文地址:https://www.cnblogs.com/wsfj/p/17206051.html