COOKIE
-
Cookie是保存在客户端的纯文本文件。比如txt文件。所谓的客户端就是我们自己的本地电脑。一般来说cookie都是服务器端写入客户端的纯文本文件。
-
Cookie 文件必须由浏览器的支持,在浏览器中可以设置阻止cookie。这样服务器端就不能写入cookie 到客户端了。
cookie到底干什么用呢?
- 在sesion技术出现之前,一般网站都是通过cookie保存请求的内容,服务器根据用户进行特定的内容展示。
COOKIE 的存储形式
-
cookie 是以字符串的形式存储,在字符串中以
key=value
的形式出现 -
每一个
key=value
是一条数据 -
多个数据之间以
;
分割// cookie 的形态 'a=100; b=200; c=300;'
COOKIE 的特点
- 存储大小有限制,一般是 4 KB 左右
- 数量有限制,一般是 50 条左右
- 有时效性,也就是有过期时间,一般是 会话级别(也就是浏览器关闭就过期了)
- 有域名限制,也就是说谁设置的谁才能读取
使用方式
前后端操作
前端可以通过 js 操作 cookie 空间进行增删改查。
后端也可以通过后端语言进行 cookie 空间的增删改查。
前端操作
-
读取 cookie 的内容使用
document.cookie
const cookie = document.cookie console.log(cookie) // 就能得到当前 cookie 的值
-
设置 cookie 的内容使用
document.cookie
// 设置一个时效性为会话级别的 cookie document.cookie = 'a=100'
-
给cookie设置过期时间
语法:document.cookie = 'a=100;expires=时间对象' document.cookie = 'b=200;expires=Thu, 18 Dec 2018 12:00:00 GMT";' cookie使用的是世界标准时间,而我们使用的new Date()则是我们自己的时间,也就是中国所在时区的时间,+8时区 我们需要减去这8个小时在设置cookie时间,才是我们正确设置的时间。 const expires = 1000 * 60 * 60 * 24 * 365 // 过期时间1年 const time = new Date() time.setTime(time.getTime() - 1000 * 60 * 60 * 8 + expires) // 用于设置过期时间 document.cookie = `${key}=${value};expires=${time};` // 设置一个有过期时间的 cookie document.cookie = 'b=200;expires=Thu, 18 Dec 2043 12:00:00 GMT";' // 上面这个 cookie 数据会在 2043 年 12 月 18 日 12 点以后过期,过期后会自动消失
-
删除 cookie 的内容使用
document.cookie
// 因为 cookie 不能直接删除 // 所以我们只能把某一条 cookie 的过期时间设置成当前时间之前 // 那么浏览器就会自动删除 cookie document.cookie = 'b=200;expires=Thu, 18 Dec 2018 12:00:00 GMT";'
COOKIE 操作封装
- 因为 js 中没有专门操作 COOKIE 增删改查的方法
- 所以需要我们自己封装一个方法
设置 cookie
/**
* setCookie 用于设置 cookie
* @param {STRING} key 要设置的 cookie 名称
* @param {STRING} value 要设置的 cookie 内容
* @param {NUMBER} expires 过期时间
*/
function setCookie (key, value, expires) {
const time = new Date()
time.setTime(time.getTime() - 1000 * 60 * 60 * 8 + expires) // 用于设置过期时间
document.cookie = `${key}=${value};expires=${time};`
}
读取 cookie
/**
* getCookie 获取 cookie 中的某一个属性
* @param {STRING} key 你要查询的 cookie 属性
* @return {STRING} 你要查询的那个 cookie 属性的值
*/
function getCookie(key) {
const cookieArr = document.cookie.split(';') // a=100;b=200;c=300
//[a=100, b=200, c=300]
let value = ''
cookieArr.forEach(item => { // item=> a=100
if (item.split('=')[0].trim() === key) {
value = item.split('=')[1]
}
})
return value
}
删除 cookie
/**
* delCookie 删除 cookie 中的某一个属性
* @param {STRING} name 你要删除的某一个 cookie 属性的名称
*/
function delCookie(name) {
setCookie(name, 1, -1)
}
与http协议关系
- 每一个 HTTP 请求都会在请求头中携带 cookie 到服务端
- 每一个 HTTP 响应都会在响应头中携带 cookie 到客户端
- 也就是说,cookie 是不需要我们手动设置,就会自动在 客户端 和 服务端之间游走的数据
- 我们只是需要设置一下 cookie 的内容就可以