Cookie增删改查方法封装(低内存开销版）

news2024/9/21 12:24:52

本文章中的低内存开销是指在获取cookie的时候不进行字符串—>数组的转变，全程使用slice+indexOf切割字符串，不创建和操作数组，节约内存，本文代码已存放到github中，后续会持续完善功能，传送门：https://github.com/Escaay/cookieHandler.git
本文由Escaay原创，转载请注明出处

一、前置知识

0.测试cookie，需要服务器环境，想要在本地完成，需要模拟服务器环境，最快的方法是在vscode扩展中下载Live Server

在这里插入图片描述

然后重启vscode,右键点击图示即可在服务器环境运行代码

在这里插入图片描述

1.cookie是挂在ducument上的，document是一个HTML标签的DOM经过特殊加工的对象，所以我们获取cookie,一般是

let cookie=document.cookie

2.添加cookie，每一次设置document.cookie都会添加cookie，而不是给cookie重新赋值，而且会自动在每个分号之后添加一个空格，例如

document.cookie='username=escaay'
document.cookie='username=xiaoming'
console.log(document.cookie)	
//'username=escaay; username=xiaoming'

3.cookie的value中不能含有;=等特殊字符，如果需要，则借助encodeURIComponent()进行编码后再赋值,取出时用decodeURIComponent解码

let value=;escaay//;是特殊字符
document.cookie=`name=username;value=${encodeURIComponent(value)}`

二、cookie增删改查方法封装

1.添加一个cookie

function setCookie(name, value, maxAge) {
            let cookie = `${name}=${encodeURIComponent(value)}`
            //判断传入过期时间类型，是数字的话就添加到cookie
            if (typeof maxAge==='number') {
                cookie += `;max-age=${maxAge}`
            }
            document.cookie = cookie
        }

2.获取整个对象类型的cookie

function getCookieObject() {
			//cookie为空返回null
            if(!document.cookie.length) return 'cookie为空'
            let result = {}
            //将添加cookie时自动生成的空格去掉，避免后面索引对不上
            let cookieStr = document.cookie.replace(/; /g, ';')
            //为cookie最后添加分号，这样一会循环才能遍历最后一项
            if (cookieStr.slice(-1) !== ';') cookieStr += ';'
            //滑动选取每一项cookie元素
            let startIndex = 0
            let nextStartIndex = 0
            //等号的索引
            let equalIndex = 0
            //当startIndex之后不再有分号时，已经遍历每一项cookie元素
            while (cookieStr.indexOf(';', startIndex) !== -1) {
                equalIndex = cookieStr.indexOf('=', startIndex)
                nextStartIndex = cookieStr.indexOf(';', startIndex) + 1
                let key = cookieStr.slice(startIndex, equalIndex)
                let value = decodeURIComponent(cookieStr.slice(equalIndex + 1, nextStartIndex-1))
                result[key] = value
                startIndex = nextStartIndex
            }
            return result
        }

3.根据名称获取单个cookie的值

function getCookie(name) {
			//未传参则退出函数
            if(!name)  return 'cookie中不存在此键'
            let cookieStr = document.cookie
            if (cookieStr.slice(-1) !== ';') cookieStr += ';'
            let startIndex=cookieStr.indexOf(`${name}=`)
            if(startIndex===-1) return 'cookie中不存在此键'
            startIndex+=name.length+1
            let endIndex=cookieStr.indexOf(';',startIndex)
            return decodeURIComponent(cookieStr.slice(startIndex,endIndex))
        }
}

4.根据名称删除单个cookie

function deleteCookie(name){
            setCookie(name,'',0)
            console.log(`cookie中${name}删除成功`)
        }

5.清除cookie

function clearCookie(){
            let cookieObj=getCookieObject()
            Object.keys(cookieObj).forEach((v,i)=>{
                deleteCookie(v)
            })
            console.log('cookie清除成功')
        }

测试代码

        //test
        setCookie('username', 'escaay;;;')
        setCookie('phone', '88888')
        console.log('getCookieObject:  ',getCookieObject())
        console.log("getCookie('username'):  ",getCookie('username'))
        deleteCookie('username')
        console.log('getCookieObject:  ',getCookieObject())
        console.log("getCookie('username'):  ",getCookie('username'))
        clearCookie()
        console.log('getCookieObject:  ',getCookieObject())