JavaScript cookie與session的使用及區(qū)別深入探究
1. cookie
1.1 什么是cookie
cookie是解決http無(wú)狀態(tài)的一種方案。
服務(wù)端與服務(wù)端經(jīng)過(guò)三次握手后建立連接,數(shù)據(jù)發(fā)送完后連接關(guān)閉,在之后的請(qǐng)求中服務(wù)端無(wú)法判斷每次的請(qǐng)求是不是由同一個(gè)用戶發(fā)出的。當(dāng)后面的請(qǐng)求依賴之前的請(qǐng)求數(shù)據(jù)的時(shí)候,客戶端每次請(qǐng)求數(shù)據(jù)的時(shí)候必須先將之前的數(shù)據(jù)保存下來(lái)然后放在后面請(qǐng)求體中。而cookie正是解決這個(gè)問(wèn)題的方案,服務(wù)端在響應(yīng)客戶端請(qǐng)求的時(shí)候?qū)ookie放在請(qǐng)求頭中一起傳遞到客戶端,在之后的請(qǐng)求中客戶端都會(huì)帶上這個(gè)cookie,服務(wù)端驗(yàn)證cookie做出響應(yīng)。
1.2 KOA中使用cookie
router.get('/getCurrentUserInfo',async ctx=>{ ctx.cookies.set('userInfo',999); ctx.body = 'success'; });
可以看到響應(yīng)頭里面包含set-cookie的字段
如果要設(shè)置中文的值需要處理下格式
const str = new Buffer('hello cookie!').toString(); ctx.cookies.set('userInfo',str);
ctx.cookies.set(name,value,conifg)還接受第三個(gè)參數(shù)config,用來(lái)配置cookie的作用范圍和作用時(shí)間
ctx.cookies.set(u_id,111111,{ expires: new Date(), maxAge: 1000 * 3600 * 4, domain: '/', path: '/', httpOnly: false, secure: false, overWrite: false, })
1.3 expires和maxAge
expires和maxAge都用來(lái)設(shè)置cookie的有效時(shí)間,expires是指定一個(gè)日期與客戶端本地的時(shí)間進(jìn)行比較,maxAge類似倒計(jì)時(shí),cookie在設(shè)置后的若干毫秒內(nèi)有效。本地的時(shí)間是可以被修改的,而同一臺(tái)服務(wù)器的時(shí)間總是相同的,因此maxAge比expires更加穩(wěn)定可靠。
// 使用expires const expiresDate = new Date(Date.now() + 1000 * 3600 * 2); // 2小時(shí)候后過(guò)期 ctx.cookie.set('u_id':11111,{ expires: expiresDate }); // 使用maxAge ctx.cookie.set('u_id':11111,{ expires: new Date(1000 * 3600 * 2); });
1.4 瀏覽器端設(shè)置和刪除cookie
在瀏覽器中直接通過(guò)document.cookie設(shè)置cookie的時(shí)候也可以配置domain、path、secure等屬性但是無(wú)法設(shè)置httpOnly。
//設(shè)置cookie const expiresDate = new Date(Date.now() + 1000 * 3600 * 4); // 4小時(shí)候過(guò)期 document.cookie = `userName=張三;path='/';expires=${expiresDate.toGMTString()}`; //刪除cookie const expiresDate = new Date(); document.cookie = `userName=張三;path='/';expires=${expiresDate.toGMTString()}`;
要注意使用的是GMT字符串格式的時(shí)間
2. session
2.1 什么是session
session的工作原理和cookie非常類似,在cookie中存放一個(gè)sessionID,真實(shí)的數(shù)據(jù)存放在服務(wù)器端,客戶端每次發(fā)送請(qǐng)求的時(shí)候帶上sessionID,服務(wù)端根據(jù)sessionID進(jìn)行數(shù)據(jù)的響應(yīng)。
2.2 koa中使用session
安裝和掛載
yarn add koa-session --save;
session的設(shè)置和獲取
const kao = require('koa'); const session = require('koa-session'); const app = new Koa(); const CONFIG = { key: 'koa.sess', /** (string) cookie key (default is koa.sess) */ /** (number || 'session') maxAge in ms (default is 1 days) */ /** 'session' will result in a cookie that expires when session/browser is closed */ /** Warning: If a session cookie is stolen, this cookie will never expire */ maxAge: 1000 * 3600 * 4, autoCommit: true, /** (boolean) automatically commit headers (default true) */ overwrite: true, /** (boolean) can overwrite or not (default true) */ httpOnly: true, /** (boolean) httpOnly or not (default true) */ signed: true, /** (boolean) signed or not (default true) */ rolling: false, /** (boolean) Force a session identifier cookie to be set on every response. The expiration is reset to the original maxAge, resetting the expiration countdown. (default is false) */ renew: false, /** (boolean) renew session when session is nearly expired, so we can always keep user logged in. (default is false)*/ secure: false, /** (boolean) secure cookie*/ sameSite: null, /** (string) session cookie sameSite options (default null, don't set it) */ }; app.use(session(CONFIG, app)); // or if you prefer all default config, just use => app.use(session(app)); app.listen(3000,()=>{});
3. cookie和session的區(qū)別
- cookie存儲(chǔ)在客戶端,session存儲(chǔ)在服務(wù)端,session比cookie更安全
- cookie的存儲(chǔ)數(shù)據(jù)的格式只能是字符串,且最多只能存儲(chǔ)4kb左右的數(shù)據(jù),session能存儲(chǔ)大量的數(shù)據(jù)且支持多樣的數(shù)據(jù)格式如json
- session 由于存儲(chǔ)在服務(wù)端,當(dāng)session多的時(shí)候會(huì)對(duì)服務(wù)器產(chǎn)生壓力,影響服務(wù)器性能。
4. cookie和session的使用場(chǎng)景
- 對(duì)于簡(jiǎn)單而且不敏感的數(shù)據(jù)通常使用cookie保存,如購(gòu)物車信息、用戶在站點(diǎn)的行為記錄等
- 對(duì)于復(fù)雜且敏感的數(shù)據(jù)使用session保存,如用戶的賬號(hào)信息等
到此這篇關(guān)于JavaScript cookie與session的使用及區(qū)別深入探究的文章就介紹到這了,更多相關(guān)JS cookie與session內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
js運(yùn)動(dòng)動(dòng)畫(huà)的八個(gè)知識(shí)點(diǎn)
本文給大家分享的是個(gè)人在學(xué)習(xí)js運(yùn)動(dòng)動(dòng)畫(huà)的過(guò)程中總結(jié)的我們需要注意的8個(gè)知識(shí)點(diǎn),分別是速度動(dòng)畫(huà)、透明度漸變、緩沖運(yùn)動(dòng)、多物體運(yùn)動(dòng)、獲取樣式、任意屬性值、鏈?zhǔn)竭\(yùn)動(dòng)和同時(shí)運(yùn)動(dòng),非常的詳細(xì),推薦給小伙伴們。2015-03-03JavaScript常用數(shù)組元素搜索或過(guò)濾的四種方法詳解
這篇文章主要介紹了JavaScript常用數(shù)組元素搜索或過(guò)濾的四種方法,每種方式通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-08-08JavaScript實(shí)現(xiàn)彈出模態(tài)窗體并接受傳值的方法
這篇文章主要介紹了JavaScript實(shí)現(xiàn)彈出模態(tài)窗體并接受傳值的方法,涉及JavaScript模態(tài)窗體的實(shí)現(xiàn)及基于URL的傳值操作技巧,需要的朋友可以參考下2016-02-02js實(shí)現(xiàn)點(diǎn)擊圖片在屏幕中間彈出放大效果
這篇文章主要介紹了js實(shí)現(xiàn)點(diǎn)擊圖片在屏幕中間彈出放大效果,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-09-09JavaScript基于自定義函數(shù)判斷變量類型的實(shí)現(xiàn)方法
這篇文章主要介紹了JavaScript基于自定義函數(shù)判斷變量類型的實(shí)現(xiàn)方法,結(jié)合實(shí)例形式分析了javascript判斷變量類型的自定義函數(shù)定義與使用方法,并針對(duì)不同瀏覽器給出了相關(guān)的分析與說(shuō)明,需要的朋友可以參考下2016-11-11Javascript計(jì)算時(shí)間差的函數(shù)分享
獲得時(shí)間差,時(shí)間格式為 年-月-日 小時(shí):分鐘:秒 或者 年/月/日 小時(shí):分鐘:秒2011-07-07微信小程序使用radio顯示單選項(xiàng)功能【附源碼下載】
這篇文章主要介紹了微信小程序使用radio顯示單選項(xiàng)功能,涉及針對(duì)radio組件事件響應(yīng)相關(guān)操作技巧,并附帶源碼供讀者下載參考,需要的朋友可以參考下2017-12-12微信小程序如何修改本地緩存key中單個(gè)數(shù)據(jù)的詳解
這篇文章主要介紹了微信小程序如何修改本地緩存key中單個(gè)數(shù)據(jù),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04