- Cookie是存在浏览器的一段字符串(最大5KB)
- 跨域不共享
- 格式:k1=v1;k2=v2;k3=v3; 因此可以储存结构化数据
- 每次发送http请求,会将请求域的cookie一起发送给server
- server可以修改cookie,并且返回给浏览器
- 浏览器也可以通过Javascript修改cookie(有限制)
客户端通过Javascript查看/修改Cookie
- 查看cookie的三种方式
- 通过浏览器控制台中的
Network
面板,查看请求,在Request Headers
中的Cookie
代表着客户端发送给服务器的Cookie;在Response Headers
的Set-Cookie
中表示服务器将Cookie
重新设置后,又返回给了客户端 - 通过
Application
面板的Cookies
可以查看当前浏览器中保存的解析后的各个域中的Cookie。 - 通过Javascript的
document.cookie
对象访问Cookie
- 通过浏览器控制台中的
- 修改Cookie的方式
- 通过
document.cookie
对cookie进行修改; - 通过各种JS库操作Cookie
- 通过
随着HTML5,localStorage和sessionStorage,已经很少再去通过Javascript修改Cookie,作为客户端数本地数据存储的途径了。
Server端NodeJS操作Cookie
-
查看Cookie
在NodeJS中可以通过req.headers.cookie
访问到原始的cookie字符串(k1=v1;k2=v2;
),在这个基础上对cookie进行组装和解析 -
修改Cookie
通过NodeJS的res.setHeader()
函数来重写cookie并返回给客户端,格式如下res.setHeader('Set-Cookie', ['key1=value1', 'path=/'])
(ps: 还可以将使用res.setHeader('Set-Cookie', 'key1=value1;key2=value2')
,通过一个字符串设置多条cookie的值,但是很多浏览器不支持这种方式,包括chrome) -
限制Cookie
- 通过在
Set-Cookie
中设置expires
,限制Cookie的过期时间; - 通过在
Set-Cookie
中设置path
,限制Cookie的作用范围; - 通过在
Set-Cookie
中设置httpOnly
,用来屏蔽在客户端通过Javascript访问和修改Cookie,从而提高系统安全性。
- 通过在
-
综合示例
let http = require('http')
let app = http.createServer((req, res) => {
// 服务器端读取cookie
req.cookie = {}
let cookies = req.headers.cookie ? req.headers.cookie.split(';') : []
if (cookies.length > 0) {
cookies.forEach(item => {
if (item) {
let cookieArray = item.split('=')
if (cookieArray && cookieArray.length > 0) {
let key = cookieArray[0].trim()
let value = cookieArray[1] ? cookieArray[1].trim() : undefined
req.cookie[key] = value
}
}
})
}
// 服务器端设置cookie
res.setHeader('Set-Cookie', `key1=value1;httpOnly;expires=${getExpireTime()}`)
res.end(
JSON.stringify(req.cookie)
)
})
app.listen(3000, () => {
console.log('running on 3000')
})
function getExpireTime () {
let d = new Date()
d.setTime(d.getTime() + 15 * 60 * 1000)
return d.toUTCString()
}
网友评论