前端cookie的设置获取删除

最新推荐文章于 2025-04-24 08:30:00 发布

chenjinyu_lxl

最新推荐文章于 2025-04-24 08:30:00 发布

阅读量1.9k

点赞数

CC 4.0 BY-SA版权

文章标签： javascript html5

本文链接：https://blog.youkuaiyun.com/chenjinyu_lxl/article/details/105393619

本文详细介绍如何在前端设置、获取和删除Cookie，包括使用Cookie存储用户登录状态的方法，以及如何通过设置过期时间来删除Cookie。文章还提供了一个实用的Cookie类，用于简化Cookie的管理和操作。

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

前端cookie的设置获取删除

/* 我们有过这样的经历，当我们登录一个网站时候，网站
    会提示我们需不需要记住账号和密码

    一般来说，当我们登录一个网站时，后台会返回一个token字符串作为
    用户的登录标识，而当用户下次登录时，不想再登录验证了怎么办？

    这个时候cookie就有作用了，我们将后台返回的token进行加密编码，存储
    到cookie上，这样当下次用户登录时候，客户端能直接查看cookie,把cookie
    解码后返回后台验证就行了
    */
    cookie 在各浏览器的上限大约都在4k

cookie设置

	//语法 document.cookie = `${key}=${value};expires=${time};`
	//expires是设置过期时间

    // 先要获取一个时间格式为格林威治时间的时间(过期时间)
    let time = new Date('2020-09-26 00:00:00').toUTCString();
	
	
	document.cookie = 'searchHistory=路由器;expires=' + time + ';';
    document.cookie = 'name=华为;expires=' + time + ';';
    document.cookie = 'city=广州;expires=' + time + ';';
    document.cookie = 'area=天河;expires=' + time + ';';

在这里插入图片描述

cookie获取

	let cookies = document.cookie;
    console.log('cookies==>', cookies);
    //获取回来的cookie是一段长字符串
    //cookies==> age=18; height=170; searchHistory=路由器; name=华为; city=广州; area=天河

cookie删除

// 删除cookie 没有具体的删除方法，只能通过设置过期时间来删除
    let newDate = new Date('1970-01-01 00:00:00').toUTCString();
    document.cookie = 'searchHistory=;expires=' + newDate + ';';

在这里插入图片描述

封装的一个cookie类

    // 一个Cookie类，设置，获取，删除
    class Cookie {

        setOne({ key, value, time }) {
            // 设置单个cookie
            document.cookie = `${key}=${value};expires=${time};`
        }

        setAll(array) {
            /*[
                 {
                 key,
                 value,
                 time
                }
            ]*/
            array.forEach(v => {
                this.setOne(v);
            })


        }

        // 获取所有cookie
        getAll() {
            let cookies = document.cookie;
            //截取
            return this.formatCookies(cookies);

        }

        // 获取单个cookie
        getOne(key) {

            return this.getAll()[key];
        }

        // 删除单个cookies
        delOne(key) {
            let time = new Data('1970-01-01 00:00:00').toUTCString()
            document.cookie = `${key}=;expires=${time};`
        }

        // 删除多个cookies
        delAll(array) {
            array.forEach(v => {
                this.delOne(v);
            })
        }
        // 格式化cookie
        formatCookies(str) {
            // 1.先根据分号分割
            let arr = str.split(/;\s*/);
            let target = {};
            arr.forEach(v => {
                // 2.根据等号分割
                let arr1 = v.split('=');
                target[arr1[0]] = arr1[1];
            })
            return target;
        }

    }

注意

在本地试验cookie时需要开启本地服务器

使用vscode编辑器的可以安装 live server 插件

在这里插入图片描述