cookie、session、local storage、session storage 差異

發表於 | 更新於 | 分類於 | 評論數：

重要的傳遞手法

session Storage 和 local Storage 的差別

寫入 local Storage (session Storage 亦同)

1
2
3
4
// 設定 local storage
let todo = [ ]
todo.push('Mario red’,'Mario blue’,'Mario black’,'Mario pink’,'Mario yellow')
localStorage.setItem('todolist',JSON.stringify(todo))

title

1
2
3
4
5
6
7
8
9
10
// 取出 local storage
let data = JSON.parse(localStorage.getItem('todolist’))
-> ["Mario red", "Mario blue", "Mario black", "Mario pink", "Mario yellow”]

// 資料操作
data.splice(data2.indexOf('Mario blue'),1)
-> ["Mario red", "Mario black", "Mario pink", "Mario yellow”]

// 刪除整個 local storage
localStorage.removeItem('todolist')
Storage sessionStorage localStorage
存儲大小限制 5M或更大，不會把數據發給服務器僅在本地保存 5M或更大，不會把數據發給服務器僅在本地保存
數據有效期 僅在當前瀏覽器窗口關閉前有效 始終有效，窗口或瀏覽器關閉也一直保存
作用域 不在不同的瀏覽器窗口中共享，即使是同一個頁面 在所有同源瀏覽器窗口中都是共享的
安全性 比 cookie 高一點 比 cookie 高一點

舉例 session Storage 傳送頁面

  • 例如購物流程，加入購物車 > 填寫購物資料 > 進入結帳畫面 > 成功
  • 假設填寫購物資料時回到上一頁按加入購物車的時候， JS 就可透過 sessionStorage 傳遞即時資訊，而頁面關閉時購物資料的 sessionStorage 也會跟著關閉，以減少機敏資訊外流的風險
  • session：帳號登錄驗證過後，後端所發的識別證
  • cookie：是瀏覽器存放資料的地方，可以存放 seesion 之類的資料
  • 後端可以要求前端要設置 cookie 來存放 seesion，這樣在換頁的時候，每發送一次 request 時順便也會把 seesion 送到後端，這樣後端都可以知道是同一個人（而不是每次都要送一次帳號密碼去做驗證）
  • 建議在後端進行寫 cookie 操作，並通過 session 來控制 cookie 的過期時間
cookie 欄位 說明
name 名稱 key 鍵
value 內容 value 值
Domin 網域 取得該 cookie 的網域
path 路徑 設定可以存取該 cookie 路徑
secure 傳送連線類型 設定 cookie 是否要 https 才可以進行傳送
Expires 建立時間 限制 cookie 有效時間
httpOnly 此 cookie 只能從 web server 訪問，以避免不正確的進入來取得竄改

clint 端寫入 cookie

1
document.cookie = "myName=jimmy"

title

1
2
3
4
5
// 寫入 cookie，並加入過期時間
document.cookie="username=bob; expires=Mon, 04 Dec 2017 08:18:32 GMT; path=/"

// 寫入 cookie，設定 10 秒後失效
document.cookie="username=bob; max-age=10; path=/"
server session cookie
儲存大小限制 與 cookie 共用，利用 session Id 來判定＆記錄資料 ex. 會員網站登入 cookie 在瀏覽器和服務器間來回傳遞，可以限制 cookie 只屬於某個路徑下。cookie 數據不能超過 4k，每次 http 請求都會攜帶 cookie
數據有效期 僅在當前瀏覽器窗口關閉前有效 在設置的 cookie 過期時間之前一直有效，即使窗口或瀏覽器關閉作用域
作用域 無 在所有同源瀏覽器窗口中都是共享的
安全性 比 cookie 高 低

舉例 cookie、session 登錄流程

  • 客戶端使用用戶名跟密碼請求登錄
  • 服務端收到請求，去驗證用戶名和密碼（後台根據請求去數據庫查找是否有該用戶）
  • 驗證成功後，服務端會簽發一個 API token（進行 API 路徑存取時先 JWT 驗證 -> 驗證成功才允許訪問該 API，該 token 值一般都會存入資料庫中，並設置過期時間），再把這個 token 發送給客戶端
  • 客戶端收到 token 之後，再用 js 塞到 cookie 或 storage 裡面
  • 客戶端每次向服務端請求資源的時候需要帶著服務端簽發的 token
  • 服務端收到請求，然後去驗證客戶端請求裡面帶著的 token（token 是否為該用戶的令牌以及 token 是否有效等），如果驗證成功就向客戶端返回請求的數據
0%