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模板
let Koa = require('koa')
let router = require('koa-router')()
const render = require('koa-art-template');
const path = require('path');
var app = new Koa()
//配置 koa-art-template模板引擎
render(app, {
root: path.join(__dirname, 'views'), // 視圖的位置
extname: '.html', // 后綴名
debug: process.env.NODE_ENV !== 'production' //是否開啟調試模式
});
router.get('/',async (ctx)=>{
ctx.cookies.set('userinfo', 'zhangsan', {
maxAge:60*1000*60
});
let list = {
name: '張三'
}
await ctx.render('index',{
list:list
});
})
router.get('/news',async (ctx)=>{
var userinfo = ctx.cookies.get('userinfo');
console.log(userinfo);
let app = {
name: '張三11',
userinfo: userinfo
};
await ctx.render('news',{
list: app
});
})
app.use(router.routes()); /*啟動路由*/
app.use(router.allowedMethods());
app.listen(3000);
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <h2 class="title">這是一個index頁面</h2> <br/> <h2>綁定數據</h2> {{list.name}} </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <h2 class="title">這是一個news頁面</h2> <br/> <h2>綁定數據</h2> {{list.name}} <h2>Cookies</h2> {{list.userinfo}} </body> </html>
啟動服務后，瀏覽器訪問/根路由可以看到設置cookies成功
訪問/news路由，獲取cookies
其它options 設置
let Koa = require('koa')
let router = require('koa-router')()
const render = require('koa-art-template');
const path = require('path');
var app = new Koa()
//配置 koa-art-template模板引擎
render(app, {
root: path.join(__dirname, 'views'), // 視圖的位置
extname: '.html', // 后綴名
debug: process.env.NODE_ENV !== 'production' //是否開啟調試模式
});
router.get('/',async (ctx)=>{
ctx.cookies.set('userinfo', 'zhangsan', {
maxAge:60*1000*60,
path: '/news', //這里表示當我訪問/news這個路由（頁面）的時候才設置這個cookies
httpOnly: false
});
let list = {
name: '張三'
}
await ctx.render('index',{
list:list
});
})
router.get('/news',async (ctx)=>{
var userinfo = ctx.cookies.get('userinfo');
console.log(userinfo);
let app = {
name: '張三11',
userinfo: userinfo
};
await ctx.render('news',{
list: app
});
})
app.use(router.routes()); /*啟動路由*/
app.use(router.allowedMethods());
app.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字符串）
let Koa = require('koa')
let router = require('koa-router')()
const render = require('koa-art-template');
const path = require('path');
var app = new Koa()
//配置 koa-art-template模板引擎
render(app, {
root: path.join(__dirname, 'views'), // 視圖的位置
extname: '.html', // 后綴名
debug: process.env.NODE_ENV !== 'production' //是否開啟調試模式
});
router.get('/',async (ctx)=>{
//koa中沒法直接設置中文的cookie，需要進行
var userinfo = new Buffer('胡椒粉').toString('base64'); // 轉換成base64字符串,類似：aGVsbG8sIHdvcmxkIQ==
ctx.cookies.set('userinfo', userinfo, {
maxAge:60*1000*60
});
let list = {
name: '張三',
}
await ctx.render('index',{
list:list
});
})
router.get('/news',async (ctx)=>{
var data = ctx.cookies.get('userinfo');
var userinfo= new Buffer(data, 'base64').toString()// 還原base 64字符串
console.log(userinfo);
let app = {
name: '張三11',
userinfo: userinfo
};
await ctx.render('news',{
list: app
});
})
app.use(router.routes()); /*啟動路由*/
app.use(router.allowedMethods());
app.listen(3000);
運行后可以看到瀏覽器端存儲的cookies userinfo的值是一串看不懂的字符串，在訪問/news頁面獲取cookies 還原base 64字符串
