cookie、sessionStorage、localStorage、session的差異

前言

有好一段時間沒發文了，已經隔了有半年，其實我一直想找時間寫，不過真的非常困難，因為工作上開發一些新的系統、也要整合其他系統及維護既有的系統外，另外也有主導一些專案進行，尤其是主導專案是第一次做，因此也學到不少東西，不過主導的專案最近也完成的差不多了，開發上有遇到的問題想說趁記憶猶新時做個紀錄，不然我怕忘記(๑´ㅂ`๑)

概述

工作上常使用的架構如下:

1. 前端:Vite做開發
2. 後端:Web API、Console排程
3. DB: SQL Server、Stored procedure

流程常常是我寫API去DB撈資料，轉成JSON給前端，前端工程師將資料綁定到v-model上做呈現，但前端工程師也是會排版和做一些簡單的資料處理。並且系統在登入時會呼叫API並且後端經過一連串的驗證邏輯後會回傳token給前端，前端將收到的token存入cookie裡面，然後每次呼叫API時都會對cookie存的token做驗證。而因為新的專案有需要用到sessionStorage，因此就去查詢這些到底有什麼差別，以前有聽過這些但都沒有仔細去研究，現在決定做個紀錄

四者的差異如下:

儲存位置不同

簡單來說cookie、sessionStorage、localStorage存於client端，而只有session是存於server端的。

生命週期

1. cookie: 有分為記憶體cookie和硬碟cookie兩種。如果有設定expires到期時間就是硬碟cookie，瀏覽器關掉後再打開還是存在，若是沒設定的話就屬於記憶體cookie，關閉瀏覽器就會失效了。
2. localStorage:存在於同一個瀏覽器內，可以跨分頁，存於硬碟裡面永久有效除非手動刪除。
3. sessionStorage:只能在同一分頁有效，要是新開一個分頁就讀不到了。因此關掉瀏覽器或是關掉該分頁都會失效。
4. session:存於server端，上面3個都是存於client端，但session的運作方式比較特別，就是值是存於server，回傳給client端的是Session ID，Session ID會存於cookie裡面，因此生命週期如同一般cookie，要是沒特別設定時間就是關閉瀏覽器就失效了

使用方式

1. cookie: document.cookie = name + '=' + value 這種方式存入，其實也類似key、value方式
2. localStorage:以localStorage.setItem('name','peter')這種key、value方式做儲存，取值的話就是localStorage.getItem('name')用key值來處理，用法和javascript物件幾乎一樣，也和C#的Dictionary類似。但是有一點要注意，就是value只能儲存字串，因此當value是陣列或物件的話，必須使用JSON.stringify()來轉成字串儲存，而讀取資料時必須將讀出的資料使用JSON.parse()轉為陣列或物件。
3. sessionStorage跟localStorage使用方式一樣。
4. session: Session["CurrentTime"] = DateTime.Now.ToString()，其實也是key、value方式做處理。

所以上面的使用方式都是key、value，因此不管儲存還是讀取資料的用法都幾乎一樣。

存放大小

cookie:4KB

localStorage、sessionStorage大約5MB，因此理所當然適合用來儲存比較複雜的資料

HTTP請求

cookie:每次請求都會被自動夾帶在HTTP的Header裡面

localStorage、sessionStorage: 只存在於client端，不會參與和server溝通，不過要注意的是這邊指的不會參與和server溝通指的其實是不自動發送，所以並不會像cookie一樣被自動夾帶在header裡面，但還是可以手動發AXIOS將資料包進data物件裡面對API發送請求。

大致整理一下他們的差別，不然怕忘記，趁現在比較有空趕快做個紀錄(๑•́ ₃ •̀๑)