一.cookie设置
1.cookie的名字和值
document.cookie = 'mk = miki'
2.过期时间(expires),格式:Wdy, DD-Mon-YYYY HH:MM:SS GMT
没有设置 expires 选项时，cookie 的生命周期仅限于当前会话中，关闭浏览器意味着这次会话的结束，所以会话 cookie 仅存在于浏览器打开状态之下。这就是为什么为什么当你登录一个 Web 应用时经常会看到一个复选框，询问你是否记住登录信息：如果你勾选了复选框，那么一个 expires 选项会被附加到登录 cookie 中。如果 expires 设置了一个过去的时间点，那么这个 cookie 会被立即删掉。
let day = 3
let date = new Date()
let time = date.getTime() + day * 24 * 60 * 60 * 1000
date.setTime(time)
let expires = ';expires=' + date.toGMTString() //也可以用date.toUTCString()
document.cookie = 'name=miki;' + expires
3.domain
不设置默认为当前域,设置别的域将被忽略,设置为本域,前面默认加一个点,表示本域及其子域都能用,如下
4.path
和 domain 选项类似，path选项指定了请求的资源 URL 中必须存在指定的路径时，才会发送Cookie 消息头。这个比较通常是将 path 选项的值与请求的 URL 从头开始逐字符比较完成的。如果字符匹配，则发送 Cookie 消息头.
比如: path = '/abc',现在有一个访问是'/abcdef',也能匹配上该path,所以可以推测path的匹配规则是:
/^\/abc/
5.secure
设置了该属性后,只有当一个请求通过 SSL 或 HTTPS 创建时，包含 secure 选项的 cookie 才能被发送至服务器
6.httpOnly
HTTP-Only 背后的意思是告之浏览器该 cookie 绝不能通过 JavaScript 的 document.cookie 属性访问。设计该特征意在提供一个安全措施来帮助阻止通过 JavaScript 发起的跨站脚本攻击 (XSS) 窃取 cookie 的行为
设置cookie函数
function setCookie (name, value, day, domain, path, secure) {
let str = ''
let date = new Date()
let time = date.getTime()
if (day > 0) {
time += day * 24 * 60 * 60 * 1000
}
date.setTime(time)
let expires = ';expires=' + date.toGMTString() //也可以用date.toUTCString()
str += name + '=' + value + expires
if (domain) str += ';domain=' + domain
if (path) str += ';path=' + path
if (secure === true) str += ';secure'
document.cookie = str
}
二.修改cookie
想要修改cookie,必须设置一个具有相同 cookie name，domain，path的cookie.
document.cookie = 'name=miki;domain=abc.com'
document.cookie = 'name=miki' //这样设置不能把上面的覆盖掉,因为这两个cookie格式不完全一致
document.cookie //'name=miki;name=miki' 因为这两个cookie是不同的,所以会全部打印出来
三.cookie获取
前端获取cookie都是通过document.cookie获取,只能得到一个有多组key=value,并且以分号隔开的字符串,提取cookie
//imput:想要获取的cookie的名字
//output:对应的cookie值
function getCookie (name) {
let arr = document.cookie.split(';')
let tmp
for (let i = 0; i < arr.length; i++) {
tmp = arr[i].split('=')
if (tmp[0].trim() === name.trim()) {
return tmp[1]
}
}
}
四.cookie删除
把cookie设置一个过去的时间即达到删除cookie的效果
function delCookie (name) {
document.cookie += name + '=;Max-Age = -9999999999;'
}
五.nginx转发跨域与cookie
ctx.cookies.set(
'cid','12334',{
domain:'node.cookie.com', // 写cookie所在的域名(这样设置子域可以访问到cookie)
path:'/', // 写cookie所在的路径
maxAge: 2*60*60*1000, // cookie有效时长
expires:new Date('2018-02-08'), // cookie失效时间
httpOnly:false, // 是否只用于http请求中获取
overwrite:false // 是否允许重写
}
)
ctx.cookies.get('cid') //koa(v2),cookie获取
六.cors请求与cookie
跨域的请求采用cors解决方案设置和携带cookie必须遵从以下两点:
1.XMLHttpRequest对象withCredentials属性设置为true
2.服务器端,Access-Control-Allow-Origin设置为请求的origin或者'*'
注意:cors设置的cookie不能用document.cookie获得,当且仅当在访问该跨域的接口时,cookie才会带上,请求头中可见
document.cookie = 'aaa = bbb'
//前端请求
ajax({
url: 'http://api.cors.com:8888/cors/test1',
params: param,
method: 'POST',
// contentType: 'application/json',
success: function (res) {
console.log(123);
ajax({
url: 'http://api.cors.com:8888/cors/cookie',
params: {},
method: 'get',
success: function () {
console.log(123)
}
})
}
})
//node服务
app.use(function (req, res, next) {
res.set({
'Access-Control-Allow-Origin': 'http://www.cors.com:8989',
'Access-Control-Allow-Credentials': true
// 'Access-Control-Allow-Headers': 'Content-Type'
})
next()
})
app.all('/cors/test1', function (req, res) {
res.cookie('kkk', 'iii')
res.send('/cors/test1');
})
app.get('/cors/cookie', function (req, res) {;
console.log(req.headers.cookie, 'cookie') //打印结果:kkk=iii(结果中不存在aaa=bbb)
res.send('/cors/cookie');
})
//注意:如果还有一个跨域的请求,http://www.abc.com/api/test,这个请求不会带上kkk=iii