Cookie 简介
cookie 是存储于访问者的计算机中的变量。可以让我们用同一个浏览器访问同一个域 名的时候共享数据。
HTTP 是无状态协议。简单地说,当你浏览了一个页面,然后转到同一个网站的另一个页 面,服务器无法认识到这是同一个浏览器在访问同一个网站。每一次的访问,都是没有任何 关系的。
Cookie的使用场景有很多比如:保存用户信息,浏览器历史记录,猜你喜欢的功能,10天免登陆,多个页面之间的数据传递,cookie实现购物车功能
Koa Cookie 的使用
不需要安装第三方模块,可以直接在Koa 中设置 Cookie 的值
ctx.cookies.set(name,value,[options])
通过options 设置 cookie name 的value
maxAge:一个数字表示从 Date.now() 得到的毫秒(就是说cookie的有效时长)
expires: cookie 过期的Date(就是说这个cookie到某个日期时间就到期)
path:cookie 路径, 默认是'/' ,如果设置了其它,比如/news表示当访问/news的时候才设置这个cookies
domain:cookie 域名,正常情况下不要设置,当有很多个子域名的时候可以这样设置.baidu.com(这样表示baidu.com下的子域名,比如a.baidu.com或者b.baidu.com都可以)
secure:安全 cookies 默认 false,设置成 true 表示 只有 https 可以访问
httpOnly:是否只是服务器可访问 cookies, 默认是true
overwrite :一个布尔值,表示是否覆盖以前设置的同名 的 cookies(默认是 false). 如果是 true, 在同 一个请求中设置相同名称的所有 Cookies(不 管路径或域)是否在设置此 Cookies 时从 Set-Cookie 标头中过滤掉。
设置cookies和获取cookies
创建node应用app.js和index.html和news.html模板
1let Koa = require('koa') 2let router = require('koa-router')() 3const render = require('koa-art-template'); 4const path = require('path'); 5 6var app = new Koa() 7 8//配置 koa-art-template模板引擎 9render(app, { 10 root: path.join(__dirname, 'views'), // 视图的位置 11 extname: '.html', // 后缀名 12 debug: process.env.NODE_ENV !== 'production' //是否开启调试模式 13}); 14 15 16router.get('/',async (ctx)=>{ 17 ctx.cookies.set('userinfo', 'zhangsan', { 18 maxAge:60*1000*60 19 }); 20 let list = { 21 name: '张三' 22 } 23 await ctx.render('index',{ 24 list:list 25 }); 26}) 27 28router.get('/news',async (ctx)=>{ 29 var userinfo = ctx.cookies.get('userinfo'); 30 console.log(userinfo); 31 let app = { 32 name: '张三11', 33 userinfo: userinfo 34 }; 35 await ctx.render('news',{ 36 list: app 37 }); 38}) 39 40app.use(router.routes()); /*启动路由*/ 41app.use(router.allowedMethods()); 42app.listen(3000); 43 44<!DOCTYPE html> 45<html lang="en"> 46<head> 47 <meta charset="UTF-8"> 48 <title>Title</title> 49</head> 50<body> 51 <h2 class="title">这是一个index页面</h2> 52 <br/> 53 <h2>绑定数据</h2> 54 {{list.name}} 55</body> 56</html> 57 58<!DOCTYPE html> 59<html lang="en"> 60<head> 61 <meta charset="UTF-8"> 62 <title>Title</title> 63</head> 64<body> 65 <h2 class="title">这是一个news页面</h2> 66 <br/> 67 <h2>绑定数据</h2> 68 {{list.name}} 69 <h2>Cookies</h2> 70 {{list.userinfo}} 71</body> 72</html>
启动服务后,浏览器访问/根路由可以看到设置cookies成功

访问/news路由,获取cookies

其它options 设置
1let Koa = require('koa') 2let router = require('koa-router')() 3const render = require('koa-art-template'); 4const path = require('path'); 5 6var app = new Koa() 7 8//配置 koa-art-template模板引擎 9render(app, { 10 root: path.join(__dirname, 'views'), // 视图的位置 11 extname: '.html', // 后缀名 12 debug: process.env.NODE_ENV !== 'production' //是否开启调试模式 13}); 14 15 16router.get('/',async (ctx)=>{ 17 ctx.cookies.set('userinfo', 'zhangsan', { 18 maxAge:60*1000*60, 19 path: '/news', //这里表示当我访问/news这个路由(页面)的时候才设置这个cookies 20 httpOnly: false 21 }); 22 let list = { 23 name: '张三' 24 } 25 await ctx.render('index',{ 26 list:list 27 }); 28}) 29 30router.get('/news',async (ctx)=>{ 31 var userinfo = ctx.cookies.get('userinfo'); 32 console.log(userinfo); 33 let app = { 34 name: '张三11', 35 userinfo: userinfo 36 }; 37 await ctx.render('news',{ 38 list: app 39 }); 40}) 41 42app.use(router.routes()); /*启动路由*/ 43app.use(router.allowedMethods()); 44app.listen(3000);
重启服务后,运行,当访问到/页面的时候,没有设置cookies了,获取cookies也是为空的,访问/news的时候才设置cookies,设置了httpOnly的值为false,那么前端也可以获取到cookies


可以看到当访问/news路由(页面)时,前端可以使用document.cookie获取到cookies
Koa 中设置中文 Cookie
当设置Cookie的时候,如果有中文,运行匹配到路由后后台程序就报错了:argument value is invalid
在koa中没有直接设置中文的 ,需要自己在设置cookies(转换成base64字符 串)和获取cookies(还原base 64字符串)
1let Koa = require('koa') 2let router = require('koa-router')() 3const render = require('koa-art-template'); 4const path = require('path'); 5 6var app = new Koa() 7 8//配置 koa-art-template模板引擎 9render(app, { 10 root: path.join(__dirname, 'views'), // 视图的位置 11 extname: '.html', // 后缀名 12 debug: process.env.NODE_ENV !== 'production' //是否开启调试模式 13}); 14 15 16router.get('/',async (ctx)=>{ 17 //koa中没法直接设置中文的cookie,需要进行 18 var userinfo = new Buffer('胡椒粉').toString('base64'); // 转换成base64字符串,类似:aGVsbG8sIHdvcmxkIQ== 19 ctx.cookies.set('userinfo', userinfo, { 20 maxAge:60*1000*60 21 }); 22 let list = { 23 name: '张三', 24 } 25 await ctx.render('index',{ 26 list:list 27 }); 28}) 29 30router.get('/news',async (ctx)=>{ 31 var data = ctx.cookies.get('userinfo'); 32 var userinfo= new Buffer(data, 'base64').toString()// 还原base 64字符串 33 console.log(userinfo); 34 let app = { 35 name: '张三11', 36 userinfo: userinfo 37 }; 38 await ctx.render('news',{ 39 list: app 40 }); 41}) 42 43app.use(router.routes()); /*启动路由*/ 44app.use(router.allowedMethods()); 45app.listen(3000);

运行后可以看到浏览器端存储的cookies userinfo的值是一串看不懂的字符串,在访问/news页面获取cookies 还原base 64字符串
