详解手写封装Cookie!

最新推荐文章于 2024-06-27 11:22:44 发布

闵先生1

最新推荐文章于 2024-06-27 11:22:44 发布

阅读量379

点赞数 2

文章标签： javascript es6 css html

本文链接：https://blog.youkuaiyun.com/weixin_55973231/article/details/114988250

版权

本文介绍了一个简单的JavaScript实现来管理浏览器的Cookie。通过四个函数：设置、获取、删除和清空Cookie，可以方便地进行Cookie的操作。同时展示了如何使用这些函数进行实际的Cookie管理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<script>
    // 添加cookie
    function setCookie(key, value, maxAge) {
        // 在设置cookie前进行编码操作。
        value = encodeURIComponent(value);
        if (maxAge) {
            document.cookie = `${key}=${value};max-age=${maxAge};`;
        } else {
            document.cookie = `${key}=${value};`;
        }
    }

    // 获取cookie。    取的所有cookie的值，格式：name=董书华;age=20;sex=男;height=170
    function getCookie(key) {
        var arr = document.cookie.split(';'); // ['name=董书华','age=20',...]
        if (arr.length > 0) {
            for (let i = 0; i < arr.length; i++) {
                const a = arr[i].split('=');
                var index = a.findIndex(function (v) {
                    return v.trim() == key;
                });
                if (index != -1) {
                    // return a[1];
                    return decodeURIComponent(a[1]);
                }
            }
        }
        return undefined;
    }

    // 删除cookie
    function removeCookie(key) {
        var value = getCookie(key);
        setCookie(key, value, -60000);
    }

    // 清空cookie
    function clearCookie() {
        // 找出来所有的key组成的数组  ['name','age']
        var arr = document.cookie.split(';');
        for (let i = 0; i < arr.length; i++) {
            const a = arr[i];
            removeCookie(a.split('=')[0]);
        }
    }

    // 测试添加cookie
    setCookie('name', '张三');
    setCookie('age', '20', 8 * 60 * 60);

    // 测试获取cookie
    var name = getCookie('name');
    var age = getCookie('age');
    console.log(name);
    console.log(age);

    // 删除删除和清空cookie
    // removeCookie('name');
    clearCookie();

    // 删除或清除后，如下返回undefined。
    var name = getCookie('name');
    var age = getCookie('age');
    console.log(name);
    console.log(age);

    // jquery.cookie.js插件。

</script>