JavaScript cookie與session的使用及區(qū)別深入探究
1. cookie
1.1 什么是cookie
cookie是解決http無狀態(tài)的一種方案。
服務(wù)端與服務(wù)端經(jīng)過三次握手后建立連接,數(shù)據(jù)發(fā)送完后連接關(guān)閉,在之后的請求中服務(wù)端無法判斷每次的請求是不是由同一個用戶發(fā)出的。當(dāng)后面的請求依賴之前的請求數(shù)據(jù)的時候,客戶端每次請求數(shù)據(jù)的時候必須先將之前的數(shù)據(jù)保存下來然后放在后面請求體中。而cookie正是解決這個問題的方案,服務(wù)端在響應(yīng)客戶端請求的時候?qū)ookie放在請求頭中一起傳遞到客戶端,在之后的請求中客戶端都會帶上這個cookie,服務(wù)端驗證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)還接受第三個參數(shù)config,用來配置cookie的作用范圍和作用時間
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都用來設(shè)置cookie的有效時間,expires是指定一個日期與客戶端本地的時間進(jìn)行比較,maxAge類似倒計時,cookie在設(shè)置后的若干毫秒內(nèi)有效。本地的時間是可以被修改的,而同一臺服務(wù)器的時間總是相同的,因此maxAge比expires更加穩(wěn)定可靠。
// 使用expires const expiresDate = new Date(Date.now() + 1000 * 3600 * 2); // 2小時候后過期 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
在瀏覽器中直接通過document.cookie設(shè)置cookie的時候也可以配置domain、path、secure等屬性但是無法設(shè)置httpOnly。
//設(shè)置cookie const expiresDate = new Date(Date.now() + 1000 * 3600 * 4); // 4小時候過期 document.cookie = `userName=張三;path='/';expires=${expiresDate.toGMTString()}`; //刪除cookie const expiresDate = new Date(); document.cookie = `userName=張三;path='/';expires=${expiresDate.toGMTString()}`;
要注意使用的是GMT字符串格式的時間
2. session
2.1 什么是session
session的工作原理和cookie非常類似,在cookie中存放一個sessionID,真實的數(shù)據(jù)存放在服務(wù)器端,客戶端每次發(fā)送請求的時候帶上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存儲在客戶端,session存儲在服務(wù)端,session比cookie更安全
- cookie的存儲數(shù)據(jù)的格式只能是字符串,且最多只能存儲4kb左右的數(shù)據(jù),session能存儲大量的數(shù)據(jù)且支持多樣的數(shù)據(jù)格式如json
- session 由于存儲在服務(wù)端,當(dāng)session多的時候會對服務(wù)器產(chǎn)生壓力,影響服務(wù)器性能。
4. cookie和session的使用場景
- 對于簡單而且不敏感的數(shù)據(jù)通常使用cookie保存,如購物車信息、用戶在站點的行為記錄等
- 對于復(fù)雜且敏感的數(shù)據(jù)使用session保存,如用戶的賬號信息等
到此這篇關(guān)于JavaScript cookie與session的使用及區(qū)別深入探究的文章就介紹到這了,更多相關(guān)JS cookie與session內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
JavaScript常用數(shù)組元素搜索或過濾的四種方法詳解
這篇文章主要介紹了JavaScript常用數(shù)組元素搜索或過濾的四種方法,每種方式通過實例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2022-08-08JavaScript實現(xiàn)彈出模態(tài)窗體并接受傳值的方法
這篇文章主要介紹了JavaScript實現(xiàn)彈出模態(tài)窗體并接受傳值的方法,涉及JavaScript模態(tài)窗體的實現(xiàn)及基于URL的傳值操作技巧,需要的朋友可以參考下2016-02-02JavaScript基于自定義函數(shù)判斷變量類型的實現(xiàn)方法
這篇文章主要介紹了JavaScript基于自定義函數(shù)判斷變量類型的實現(xiàn)方法,結(jié)合實例形式分析了javascript判斷變量類型的自定義函數(shù)定義與使用方法,并針對不同瀏覽器給出了相關(guān)的分析與說明,需要的朋友可以參考下2016-11-11微信小程序如何修改本地緩存key中單個數(shù)據(jù)的詳解
這篇文章主要介紹了微信小程序如何修改本地緩存key中單個數(shù)據(jù),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04