一般而言,web有三種資訊儲存在使用者端(client-side)的常見機制,分別是cookie、local storage和session storage。
前一篇文章提到的cookie是HTML5以前常用的資訊儲存手段,但cookie只能儲存4kb的訊息,而且使用者端每次發送請求(request)時cookie都會附加在請求的檔頭(header)將訊息一併送到伺服器端去。
有時候我們只是單純想把一些資訊儲存在使用者端,不需要每次跟著使用者的請求依請傳給伺服器,況且伺服器接收這些不必要的資訊反而也是種負擔,這時候就可以考慮使用HTML5以後的新機制 ─ local storage 和 session storage。
Local Storage & Session Storage
先講local storage和session storage的共同處:
- HTML5以後才出現的使用者端(client-side)儲存機制;
- 不會跟著使用者端給伺服器的請求(request)一起送出,意即不會跟cookie一樣附加在請求的檔頭(header)送出;
接下來是兩者不同之處,
Local Storage
- Local storage儲存的東西不會隨著使用者關閉瀏覽器而消失,意即除非特地刪除,否則local storage儲存的資訊會一直存在使用者端的瀏覽器;
- Local storage最高可儲存10mb的訊息。
Session Stroage
- Session storage儲存的東西會隨著使用者關閉瀏覽器而消失;
- Session stroage最高只能儲存5mb的訊息。
綜合來看,如果要改善網站效能可以善用local storage和session storage將訊息儲存在使用者端的瀏覽器內,因為這兩者都不會隨著使用者端的請求送給伺服器、加重伺服器接收請求的富安;更進一步來說,比較隱私的資訊可以選擇session storage,而像是使用者偏好設定等訊息則可以儲存在local storage。
不過如果是比較舊的瀏覽器(只支援HTML4以前)或是更隱私的使用者登入資訊則還是用cookie(登入機制可參考 "cookie-based authentication")。
References
JavaScript Cookies vs Local Storage vs Session Storage @Web Dev Simplified
Difference between cookies, session and tokens
Difference between Local Storage, Session Storage, and Cookies in JavaScript