目录
一、定义
cookie是一个存在于客户端的存储空间。
当你的代码运行在浏览器的时候，一部分功能是用来给页面显示的，一小部分是专门来存储一些数据的。
cookie空间里面可以以字符串的形式来存储数据，
数据格式： 必须是 key=value，多条数据中间用;分割
每一个cookie信息包含一个过期时间，过期时间就是达到时间的时候，cookie自动删除
二、特点
1、按照域名存储
你在哪一个域名下存储的内容，就在哪一个域名下使用，其他域名都用不了
举例：cookie就相当于工牌，你在哪个公司，就用哪个公司的工牌，只能在这个公司使用
2、存储空间大小限制
4kb，大概能存50条数据左右
举例：cookie就相当于工牌，一个工牌上不能记录太多东西
3、时效性
默认是会话级别的时效性，可以手动设置，例如7天后，两个小时后
举例：cookie就相当于工牌，有临时访客的临时工牌，正式员工有正式的
4、 请求自动携带参数
当你的cookie空间里面有内容时，只要是当前域名下的任意一个请求，都会自动携带cookie，将里面的数据放在请求头里面携带给后端。
cookie里面有多少就携带多少，如果cookie没有内容就不会携带任何参数给后端。
举例:cookie就相当于工牌,不管你的工牌上有多少信息(电话职位姓名),只要请别的部门办业务，工牌上的所有信息都可以给别人看。
5、前后端都可以进行操作
前端可以通过js操作cookie进行cookie内容的增删改查
后端也可以通过后端语言对cookie空间进行增删改查
三、前端操作cookie
1、 设置cookie
// 设置cookie
// + 不带过期时间的写法: document.cookie = 'key=value'
// + 带过期时间,需要一些修饰信息,写法:document.cookie = 'key=value;expires=时间对象'
// + 不管你给一个什么时间点的时间对象
// + cookie都会当作世界的标准时间来使用
// +因为我们是东八区 +8 所以我们要设置时间对象提前8小时
// 设置一个默认时间的cookie --会话级时效,浏览器关闭时时效
document.cookie = 'a=100'
// 准备一个15秒之后过期的cookie
let time = new Date()
time.setTime(time.getTime() - 8 * 60 * 60 * 1000 + 15 * 1000)
document.cookie = 'b=200;expires=' + time
2、 修改cookie
// 修改cookie
// 和设置cookie是一样的
// 修改cookie
let updata = document.querySelector('.updata')
updata.onclick = function () {
document.cookie = 'a=修改了'
}3、删除cookie
// 删除cookie
// + 删除cookie就是重新设置一下这个cookie
// + 把过期时间设置成当前时间之前就可以了
// 删除cookie
let del = document.querySelector('.del')
del.onclick = function () {
let time = new Date()
time.setTime(time.getTime() - 8 * 60 * 60 * 1000 - 1000)
document.cookie = 'b=200;expires=' + time
}4、获取cookie
// 获取cookie
// + 直接使用document.cookie
// 获取cookie
console.log(document.cookie)四、封装cookie
封装cookie
因为前段操作cookie比较复杂
所以我们把前端操作的cookie的操作函数封装成函数,为了调用方便
要封装一个设置cookie的方法:setCookie() => 用来设置,修改,删除
要封装一个获取cookie的方法:getCookie() => 用来获取cookie
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 封装cookie
// 因为前段操作cookie比较复杂
// 所以我们把前端操作的cookie的操作函数封装成函数,为了调用方便
// 要封装一个设置cookie的方法:setCookie() => 用来设置,修改,删除
// 要封装一个获取cookie的方法:getCookie() => 用来获取cookie
function setCookie(key, value, expires) {
// 首先判断有没有传递过期时间
if (expires) {
// 准备一个时间对象
let time = new Date()
time.setTime(time.getTime() - 8 * 60 * 60 * 1000 + expires * 1000)
// 设置我准备设置的cookie
document.cookie = `${key}=${value};expires=${time}`
}else{
// 设置我准备设置的cookie
document.cookie = `${key}=${value};`
}
}
// 使用一下
setCookie('a',12,5)
setCookie('b',120)
setCookie('c',120)
setCookie('d',120)
// 根据cookie
function getCookie(key){
// 准备一个字符串
let str = ''
console.log(document.cookie)
let tmp = document.cookie.split('; ')//分号后面有空格
console.log(tmp)
tmp.forEach(function(item){
console.log(item)
let k = item.split('=')
console.log(k)
if(k[0]===key){
str = k[1]
}
})
return str
}
//
let a = getCookie('c')
console.log(a)
</script>
</body>
</html>
1213
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
