1.简介
- 参考：cookie by 阮一峰
- 含义：Cookie 是一些数据, 存储于你电脑上的文本文件中，用于存储 web 页面的用户信息
2.结构
- Cookie 数据是以键值对的形式存在的，且每个键值对都有过期时间，每个cookie项有几个部分组成：
| 属性 |
含义 |
说明 |
| Name |
名称 |
名称 |
| Value |
值 |
值 |
| Expires |
到期时间 |
默认持续到浏览器关闭 |
| Domain |
域 |
当前cookie项所属的域名 |
| Path |
路径 |
当前cookie项所属的域名路径，默认是当前路径 |
| HttpOnly |
只能由服务端设置 |
指定该 Cookie 无法通过 JavaScript 脚本拿到，只能由服务端设置 |
| Secure |
安全加密 |
指定浏览器只有在加密协议 HTTPS 下，才能将这个 Cookie 发送到服务器 |
3.前端操作
- 设置Cookie：当为cookie项设置其他属性时，用";"进行分隔
// 设置cookie
document.cookie = "username=orochiz"
- 设置过期时间：各个属性之间用";"进行分隔，时间格式为时间对象
// 添加过期时间（单位：天）
var d = new Date() // 当前时间
var days = 3 // 3天
d.setDate(d.getDate() + days)
document.cookie = "username=orochiz;"+"expires="+d
- 删除cookie项：设置一个过期的时间，浏览器会自动删除这cookie
var d = new Date() // 当前时间
//过期时间为昨天
d.setDate(d.getDate() - 1)
document.cookie = "username=orochiz;"+"expires="+d
- 获取Cookie：只能获取名称和值，其他属性拿不到，每个cookie项通过";"进行分隔
// 读取cookie
var msg = document.cookie
console.log(msg) // username=orochiz; age=20
// 设置cookie的函数 (过期时间以 天 为单位)
function setCookie(key,val,days){
// 获取当前时间
var d = new Date()
// getDate()返回月份的某一天 setDate()设置一个月的某一天
// 将当前时间设置为3天后
d.setDate(d.getDate() + days)
// 设置cookie
document.cookie = `${key}=${val};expires=${d}`
}
// 获取cookie的函数
function getCookie(cname){
// 将cookie字符串分割成数组
var arr = document.cookie.split(";")
var name = cname + "="
// 遍历所有的键值对，查找目标键值对
for(var i=0;i<arr.length;i++){
if(arr[i].startsWith(name)){
return arr[i].substring(name.length)
}
}
// 没有相关的cookie则返回null
return null
}
4.特性
- Cookie 有数量和大小的限制，请保证大小不能超过4KB，单个域名设置的 Cookie 不应超过30个
- Cookie 遵守同源策略，只要域名相同和端口相同，就可以共享 Cookie（不要求协议相同）
- 请求数据时，请求头默认会带上这个域名下的cookie
- 浏览器可以设置不接受 Cookie，也可以设置不向服务器发送 Cookie(详情设置请自主搜索)
// 浏览器是否打开 Cookie 功能
window.navigator.cookieEnabled // true
- ajax跨域访问：在ajax跨域访问时，默认不会携带cookie，如果需要携带，需要客户端和服务端同时进行配置，少了一方都不行
//服务端设置（请求端当前服务器）
//express
//要发送Cookie，Access-Control-Allow-Origin就不能设为星号
res.header('Access-Control-Allow-Origin', 'http://127.0.0.1:8090'); // http://127.0.0.1:8090/ 端口号后面不能加 /
res.header('Access-Control-Allow-Methods', 'GET,PUT,POST');
res.header('Access-Control-Allow-Credentials','true');
//浏览器端
axios({
url:'http://192.168.1.197:8090/test.json',
withCredentials: true
})
5.服务端操作
const http = require('http');
http.createServer((req, res) => {
// 设置Cookie
res.setHeader('Set-Cookie', 'mycookie=test2; path=/; HttpOnly');
res.end('Cookie set');
}).listen(8097);
