JavaScript cookie與session的使用及區(qū)別深入探究

更新時間：2022年10月14日 09:10:40 作者：愛思考的豬

這篇文章主要介紹了Java中Cookie和Session詳解，文章圍繞主題展開詳細的內(nèi)容介紹，具有一定的參考價值，感興趣的小伙伴可以參考一下

1. cookie

1.1 什么是cookie

cookie是解決http無狀態(tài)的一種方案。

服務端與服務端經(jīng)過三次握手后建立連接,數(shù)據(jù)發(fā)送完后連接關閉,在之后的請求中服務端無法判斷每次的請求是不是由同一個用戶發(fā)出的。當后面的請求依賴之前的請求數(shù)據(jù)的時候,客戶端每次請求數(shù)據(jù)的時候必須先將之前的數(shù)據(jù)保存下來然后放在后面請求體中。而cookie正是解決這個問題的方案,服務端在響應客戶端請求的時候?qū)ookie放在請求頭中一起傳遞到客戶端,在之后的請求中客戶端都會帶上這個cookie,服務端驗證cookie做出響應。

1.2 KOA中使用cookie

router.get('/getCurrentUserInfo',async ctx=>{
 ctx.cookies.set('userInfo',999);
 ctx.body =  'success';
});

可以看到響應頭里面包含set-cookie的字段

如果要設置中文的值需要處理下格式

  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都用來設置cookie的有效時間,expires是指定一個日期與客戶端本地的時間進行比較,maxAge類似倒計時,cookie在設置后的若干毫秒內(nèi)有效。本地的時間是可以被修改的,而同一臺服務器的時間總是相同的,因此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 瀏覽器端設置和刪除cookie

在瀏覽器中直接通過document.cookie設置cookie的時候也可以配置domain、path、secure等屬性但是無法設置httpOnly。

//設置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ù)存放在服務器端,客戶端每次發(fā)送請求的時候帶上sessionID,服務端根據(jù)sessionID進行數(shù)據(jù)的響應。

2.2 koa中使用session

安裝和掛載

yarn add koa-session --save;

session的設置和獲取

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存儲在服務端,session比cookie更安全
cookie的存儲數(shù)據(jù)的格式只能是字符串,且最多只能存儲4kb左右的數(shù)據(jù),session能存儲大量的數(shù)據(jù)且支持多樣的數(shù)據(jù)格式如json
session 由于存儲在服務端,當session多的時候會對服務器產(chǎn)生壓力,影響服務器性能。