簡述cookie、sessionStorage和localStorage的區別
阿新 • • 發佈：2021-10-21
共同點：都是儲存在瀏覽器端，用來在瀏覽器端儲存資料,且都是同源的。
1、localStorage
localStorage 是 HTML5 標準中新加入的技術，始終有效，視窗或瀏覽器關閉也一直儲存，因此用作持久資料。而且在所有同源視窗中都是共享的。
儲存在客戶端，不與伺服器進行互動通訊。儲存資料大小一般都是：5MB。
應用場景：常用於長期登入（判斷使用者是否已登入），適合長期儲存在本地的資料。
2、sessionStorage
sessionStorage也是 HTML5 標準中新加入的技術，用於臨時儲存同一視窗(或標籤頁)的資料，僅在當前瀏覽器視窗關閉前有效,在關閉視窗或標籤頁之後將會刪除這些資料。
儲存在客戶端，不與伺服器進行互動通訊。儲存資料大小一般都是：5MB。
應用場景：敏感賬號一次性登入。
3、cookie
cookie 只在設定的 cookie 過期時間之前一直有效，即使視窗或瀏覽器關閉。而且在所有同源視窗中都是共享的。 cookie 資料始終在同源的 http 請求中攜帶（即使不需要），即 cookie 在瀏覽器和伺服器間來回傳遞。而 sessionStorage 和 localStorage 不會自動把資料發給伺服器，僅在本地儲存。cookie 資料還有路徑（path）的概念，可以限制 cookie 只屬於某個路徑下,儲存的大小很小隻有 4K 左右。 應用場景：- 因為HTTP協議是無狀態的，即伺服器不知道使用者上一次做了什麼，這嚴重阻礙了互動式Web應用程式的實現。在典型的網上購物場景中，使用者瀏覽了幾個頁面，買了一盒餅乾和兩飲料。最後結帳時，由於HTTP的無狀態性，不通過額外的手段，伺服器並不知道使用者到底買了什麼。為了做到這點，就需要使用到Cookie了。伺服器可以設定或讀取Cookies中包含資訊，藉此維護使用者跟伺服器會話中的狀態。
- 儲存使用者登入狀態。例如將使用者 id 儲存於一個 cookie 內，這樣當用戶下次訪問該頁面時就不需要重新登入了，現在很多論壇和社群都提供這樣的功能。 cookie 還可以設定過期時間，當超過時間期限後，cookie 就會自動消失。因此，系統往往可以提示使用者保持登入狀態的時間：常見選項有一個月、三個 月、一年等。
- 自定義設定，定製頁面。如果網站提供了換膚或更換佈局的功能，那麼可以使用 cookie 來記錄使用者的選項，例如：背景色、解析度等。當用戶下次訪問時，仍然可以儲存上一次訪問的介面風格。
總結