cookie定义、封装、使用

最新推荐文章于 2024-07-24 11:09:48 发布

胡小葵

最新推荐文章于 2024-07-24 11:09:48 发布

阅读量93

点赞数

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/m0_48860371/article/details/127009869

版权

cookie定义

持久化存储本地数据的一种技术与域名有关

特点

数据大小4k左右
数据条数50条
有效期默认会话级别
与域名有关 ??
在客户端与服务端间进行传输

使用方式

存储数据形式:
‘key=value; key=value; key=value’
获取cookie
let cookie = document.cookie
保存cookie
document.cookie = ‘key=value’
document.cookie = ‘key=value;expires=标准日期时间’
setCookie(‘name’,‘rose’,246060*1000) 时间
document.cookie = ‘name=jack’ // ‘name=jack’
document.cookie = ‘age=18’ // ‘name=jack; age=18’
删除cookie
设置时间为当前时间之前或
removeCookie(‘key’)

封装cookie工具函数

/**
 * 保存cookie
 * @param {*} key
 * @param {*} value
 * @param {*} expires 有效时间 单位毫米
 */
function setCookie(key, value, expires) {
	let time = new Date()
	// time.setTime(time.getTime() + expires)
	time.setTime(time.getTime() - 8 * 60 * 60 * 1000 + expires)
	document.cookie = `${key}=${value};expires=${time}`
}

/**
 * 获取cookie
 * @param {*} key 
 */
function getCookie(key){
    let value = null
    let cookie = document.cookie // 'name=rose; age=18
    let arr = cookie.split(';') // ['name=rose',' age=18]
    //遍历数组
    for(let i = 0; i < arr.length; i++){
        let item = arr[i] // 'name=rose'   ' age=18'
        let itemArr = item.split('=') // ['name','rose]  [' age','18']
        if(itemArr[0].trim() == key){
            value = itemArr[1]
            break;
        }
    }

    return value
}

/**
 * 删除cookie
 */
function removeCookie(key){
    setCookie(key,'',-1)
}

第三方cookie库使用–js.cookie

写入cookie
Cookies.set(‘name’, ‘value’)
Cookies.set(‘key’, ‘value’, { expires: 27 });//创建有效期为27天的cookie
读取
Cookies.get(‘name’) // => ‘value’
Cookies.get(‘nothing’) // => undefined
读取所有可见的cookie
Cookies.get()
删除某项cookie值
Cookies.remove(‘name’)

<body>
		<h2>cookie技术</h2>
		<button class="get-cookie">获取</button>
		<button class="save-cookie">保存</button>
		<button class="delete-cookie">删除</button>
		<p></p>
        <script src="./js.cookie.js"></script>
		<script>
			const addCookiKBtn = document.querySelector('.get-cookie')
			const saveCookiKBtn = document.querySelector('.save-cookie')
			const deleteCookiKBtn = document.querySelector('.delete-cookie')
			const pEle = document.querySelector('p')

			//获取cookie
			addCookiKBtn.addEventListener('click', function () {
				let value = Cookies.get('name') 
				pEle.innerHTML = value
			})
			//保存cookie
			saveCookiKBtn.addEventListener('click', function () {
                Cookies.set('name', 'jack', { expires: 1 });
				alert('保存成功')
			})
			//删除cookie
			deleteCookiKBtn.addEventListener('click', function () {
                Cookies.remove('name')
            })
		</script>