顯示具有 SessionStorage and LocalStorage 標籤的文章。 顯示所有文章
顯示具有 SessionStorage and LocalStorage 標籤的文章。 顯示所有文章

2020/05/17

What Is The Difference Between Session, Cookie, SessionStorage and LocalStorage?




Type session cookie sessionStorage localStorage
Storage location Server-side Client-side Client-side Client-side
Maximum data size 1024KB 4K for one cookie, max 20 cookies for a website 5M 5M
Expired Time If the user doesn’t active for a long time which over expires time, the server-side will delete the session to save the space * Users can set the expiration time for each cookie.

* It will expire after closing the browser if it set on client-side
The data clear automatically when the browser is closed The data WILL NOT be deleted when the browser is closed until the user clear through JavaScript, browser cache / locally stored data
Scope No Changes made are saved and available for all same-origin page Changes made are saved and available for the current page Changes made are saved and available for all same-origin page
Security High Low Low Low
Usability Easy to use The API is difficult to use Has method setItem, getItem, removeItem, clear that easy to use
HTTP Request The data is sent back to the server for every HTTP request which causes performance problems The data is NOT sent back to the server for every HTTP request
Application Login Login, shopping cart, game scores Form Shopping cart
類型 session cookie sessionStorage localStorage
存儲 服務端 瀏覽器端 瀏覽器端 瀏覽器端
存儲容量 默認大小一般是 1024k 單個 cookie 保存資料不能超過4k,且很多瀏覽器限制一個網站最多保存20個 cookie 5M 5M
失效時間 設置一個失效時間,當距離客戶端上一次使用 session 的時間超過這個失效時間時,服務器就可以認為客戶端已經停止了活動,才會把 session 刪除以節省存儲空間 * 一般由伺服器生成,可設置失效時間。

* 如果在瀏覽器端生成Cookie,默認是關閉瀏覽器後失效
當前瀏覽器關閉前有效 始終有效,即使視窗或瀏覽器關閉也一直有效,除非用戶手動刪除,其才會失效
作用域 在所有同源視窗是共用的 不在不同的瀏覽器窗口中共用 在所有同源視窗是共用的
安全性 較高 較低 較低 較低
易用性 有很大的隨意性,可隨時呼叫,不需要開發者做精確地處理 原生 API 不如 storage 友好,需要自己封裝函數 Web Storage 擁有 setItem, getItem, removeItem, clear等方法
與伺服器端通信 每次都會攜帶在HTTP頭中,如果使用cookie保存過多資料會帶來性能問題 僅在用戶端(即瀏覽器)中保存,不參與和伺服器的通信
應用場景 將某些資料放入session中,供同一使用者的不同頁面使用 帳號登入、購物車、遊戲分數 表單頁面 購物車