点赞 + 关注 + 收藏 = 学会了
虽然现在在浏览器存储数据大多时候都使用 LocalStorage
和 SessionStorage
了,但 cookie
还是有用的。
cookie
是一个5k的小仓库,存的东西不多,而且是以字符串的形式存储的。
cookie
的格式是:key1=value1; key2=value2; key3=value3;
在后端处理登录状态时也会用到 cookie
。前端每次发送 http
请求时都会将清秋浴的 cookie
一起发送给服务端。
而后端也可以设置 cookie
。
后端设置 cookie
的权力比前端大。
前端要获取 cookie
可以使用 document.cookie
,要设置 cookie
可以使用 document.cookie = 'key1=value1;'
的方式。
但本文主要讲解 NodeJS
如何操作 cookie
,所以前端部分就不过多讲解了。
设置 Cookie
在 《node http请求》 中讲过如何使用 NodeJS
写写接口,使用 http
模块的 createServer (fn)
方法可以创建一个服务,该方法接收一个回调函数,回到函数里有2个参数,一个是 req
,一个是 res
。
要设置 Cookie
可以使用 res.setHeader()
进行操作。
设置简单的 Cookie
const http = require('http')
const server = http.createServer((req, res) => {
res.setHeader('Set-Cookie', 'msg=hello;')
res.end('hello')
})
server.listen(8000)
使用 res.setHeader
方法,第一个参数是 Set-Cookie
,第二个参数是 cookie
的值。
最后用 res.end
结束。
设置 path
如果是登录功能设置了 cookie
,通常建议把登录信息那条数据的 path
设置成 /
。这样就可以让所有请求都带上登录信息了。
// 省略部分代码
res.setHeader('Set-Cookie', 'msg=hello; path=/;')
规定服务端才能操作 httpOnly
因为前端也可以使用 document.cookie
去获取和修改 cookie
的,如果你不希望某个 cookie
值被前端修改和访问,可以设置 httpOnly
。
// 省略部分代码
res.setHeader('Set-Cookie', 'msg=hello; httpOnly;')
设置过期时间 expires
如果你需要给 cookie
某个值设置过期时间,可以设置 expires
。
比如我想设置1天后过期
const cookieExpires = () => {
const d = new Date() // 获取当前时间
d.setTime(d.getTime() + (24 * 60 * 60 * 1000))
return d.toGMTString()
}
// 省略部分代码
res.setHeader('Set-Cookie', `msg=hello; expires=${cookieExpires()};`)
如果是登录信息,我通常会这样写:
const http = require('http')
const cookieExpires = () => {
const d = new Date() // 获取当前时间
d.setTime(d.getTime() + (24 * 60 * 60 * 1000))
return d.toGMTString()
}
const server = http.createServer((req, res) => {
res.setHeader('Set-Cookie', `token=xxxx; path=/; httpOnly; expires=${cookieExpires()}`)
res.end('hello')
})
server.listen(8000)
获取 Cookie
NodeJS
要获取 cookie
可以在 req
里获取。
const http = require('http')
const server = http.createServer((req, res) => {
const cookieStr = req.headers.cookie // 获取 cookie
console.log(cookieStr) // 在控制台输出 cookie
})
server.listen(8000)
解析 Cookie
通过上面的方法获取到的 cookie
是一个格式为 key1=value1; key2=value2; key3=value3
的字符串。
看到这个格式其实是比较工整的,每个键值对都用 ;
隔开,每个分号后面又有一个空格。
所以可以通过下面的方法将 cookie
解析成对象。
// 解析 cookie
let cookie = {}
const cookieStr = req.headers.cookie || ''
cookieStr.split(';').forEach(item => {
if (!item) {
return
}
const arr = item.split('=')
const key = arr[0].trim()
const val = arr[1].trim()
cookie[key] = val
res.end()
})
server.listen(8000)
推荐阅读
👍《『前端必备』本地数据接口 —— json-server 从入门到膨胀》
你负责点赞,我负责更新 ✌ 点赞 + 关注 + 收藏 = 学会了