Web Storage3: Local Storage & Session Storage


Posted by urlun0404 on 2023-01-05

一般而言,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


#Web #storage #HTTP #local storage #session storage







Related Posts

Simple Twitter 專案開發心得

Simple Twitter 專案開發心得

MTR04_1108

MTR04_1108

初試啼聲,只用原生 JS 跟 CSS 寫「口罩地圖 」Ep.01

初試啼聲,只用原生 JS 跟 CSS 寫「口罩地圖 」Ep.01


Comments