瀏覽器存儲方式

• 一、瀏覽器存儲的方式
• 二、cookie、localStorage和sessionStorage
• • 1、cookie、localStorage和sessionStorage是什么？
  • • （1）cookie
    • （2）localStorage
    • （3）sessionStorage
  • 2、cookie、localStorage和sessionStorage的異同點
  • • （1）三者的相同點在于：
    • （2）三者的區別在于：
  • 3、cookie的用途
  • • （1）保存用戶登錄狀態
    • （2）跟蹤用戶行為
• 三、session和token
• • • （1）Session
    • （2）Token
• 四、結束語

要說瀏覽器存儲的方式，我們聽到最多的莫過于就是cookie，localStorage和sessionStorage了。那這三者之前有什么區別，cookie與session、sessionId又有什么關系呢？接下來我們一起來了解一下吧！

一、瀏覽器存儲的方式

特性cookielocalStoragesessionStorageindexedDB

數據生命周期	一般由服務器生成，可以設置過期時間	除非被清理，否則一直存在	頁面關閉就清理	除非被清理，否則一直存在
數據存儲大小	4K	5M	5M	無限
與服務端通信	每次都會攜帶在header中，對于請求性能有一定影響	不參與	不參與	不參與

補充：cookie 原本并不是用來儲存的，而是用來與服務端通信的，需要存取請自行封裝 api。

而 localStorage 則自帶 getItem 和 setItem 方法，使用很方便。

localStorage 注意點：

• localStorage 只能存字符串，存取 JSON 數據需配合 JSON.stringify() 和 JSON.parse() ；

• 遇上禁用 setItem 的瀏覽器，需要使用 try...catch 捕獲異常。

二、cookie、localStorage和sessionStorage

1、cookie、localStorage和sessionStorage是什么？

（1）cookie

• cookie 是一個非常具體的東西，指的就是瀏覽器里面能永久存儲的一種數據，僅僅是瀏覽器實現的一種數據存儲功能。

• cookie 由服務器生成，發送給瀏覽器，瀏覽器把 cookie 以kv的形式保存到某個目錄下的文本文件內，下一次請求同一網站時會把該 cookie 發送給服務器。

• cookie 的過期時間由客戶端設置。若不設置過期時間，則表示這個 cookie 的生命期為瀏覽器會話期間，關閉瀏覽器窗口， cookie 就會消失。這種生命期為瀏覽器會話期的 cookie 被稱為會話cookie。如果設置了過期時間，則在設置的 cookie 過期時間之前一直有效，即使窗口或瀏覽器關閉也會一直有效。

• 會話cookie一般不存儲在硬盤而是保存在內存里，當然這個行為并不是規范規定的。若設置了過期時間，瀏覽器就會把cookie保存到硬盤上，關閉后再打開瀏覽器后這些 cookie 仍然有效直到超過設定的過期時間。對于保存在內存里的 cookie ，不同的瀏覽器有不同的處理方式。

• 可用 document.cookie = "" 來設置 cookie 的值。cookie的值是鍵值對的形式存在，當設置的鍵一樣時，會覆蓋掉原先的值。當鍵不一樣時，對進行疊加操作。這里附上一篇我看過覺得比較好理解的關于如何設置cookie的文章，大家可以根據自身需求進行查看~

（2）localStorage

• 始終有效，窗口或瀏覽器關閉也一直保存，因此用作持久數據；
• 同源窗口都會共享，并且不會失效，不管窗口或者瀏覽器關閉與否都會始終生效。

（3）sessionStorage

• 瀏覽器存儲的一種形式。

• 僅在當前瀏覽器窗口關閉前有效，不可能持久保持。

• 在相同瀏覽器里，如果是在當前頁面里面跳轉進入一個新的頁面，可以共享；而如果是直接打開一個新的頁面，不能共享。

2、cookie、localStorage和sessionStorage的異同點

（1）三者的相同點在于：

• 都是保存在瀏覽器端、且同源的。

（2）三者的區別在于：

• 與服務器通信不同：

  cookie 數據始終在同源的 http 請求中攜帶（即使不需要），即 cookie 在瀏覽器和服務器間來回傳遞，而sessionStorage和localStorage不會自動把數據發送給服務器，僅在本地保存；

  cookie 會隨著 http 請求被發送出去，而 loacalStorage 和 sessionStorage 不會隨著 http 請求被發送出去。

  cookie 數據還有路徑（path）的概念，可以限制 cookie 只屬于某個路徑下。

• 存儲大小限制也不同：

  cookie 數據不能超過4K，同時因為每次 http 請求都會攜帶 cookie、所以 cookie 只適合保存很小的數據，如會話標識；

  sessionStorage 和 localStorage 雖然也有存儲大小的限制，但比 cookie 大得多，可以達到 5M 或更大。

• 數據有效期不同：

  sessionStorage ：僅在當前瀏覽器窗口關閉之前有效；

  localStorage ：始終有效，窗口或瀏覽器關閉也一直保存，因此用作持久數據；

  cookie ：只在設置的 cookie 過期時間之前有效，即使窗口關閉或瀏覽器關閉。

• 作用域不同：

  sessionStorage 不在不同的瀏覽器窗口中共享，即使是同一個頁面；

  localstorage 和 cookie 在所有同源窗口中都是共享的；

3、cookie的用途

（1）保存用戶登錄狀態

例如將用戶 id 存儲于一個 cookie 內，這樣當用戶下次訪問該頁面 時就不需要重新登錄了，現在很多論壇和社區都提供這樣的功能。

cookie 還可以設置過期時間，當超過時間期限后，cookie 就會自動消失。因此，系統往往可以提示用戶保持登錄狀態的時間：常見選項有一個月、三個 月、一年等。

（2）跟蹤用戶行為

例如一個天氣預報網站，能夠根據用戶選擇的地區顯示當地的天氣情況。 如果每次都需要選擇所在地是繁瑣的，當利用了 cookie 后就會顯得很人性化了，系統能夠記住上一次訪問的地區，當下次再打開該頁面時，它就會自動顯示上次用戶所在地區 的天氣情況。

因為一切都是在后臺完成，所以這樣的頁面就像為某個用戶所定制的一樣，使用起來非常方便定制頁面。如果網站提供了換膚或更換布局的功能，那么可以使用 cookie 來記錄用戶的選項，例如：背景色、分辨率等。當用戶下次訪問時，仍然可以保存上一次訪問的界面風格。

三、session和token

（1）Session

舉個例子：

• session 從字面上講，就是會話。這個就類似于你和一個人交談，你怎么知道當前和你交談的是張三而不是李四呢？對方肯定有某種特征（長相、身高等等）表明他就是張三。
• session 也是類似的道理，服務器要知道當前發請求給自己的是誰。
• 為了做這種區分，服務器就要給每個客戶端分配不同的“身份標識”，這個身份表示也就是我們平常所說的 sessionId 。然后客戶端每次向服務器發請求的時候，都帶上這個“身份標識”，服務器就知道這個請求來自于誰了。
• 至于客戶端怎么保存這個“身份標識”，可以有很多種方式，對于瀏覽器客戶端，大部分情況下都默認采用 cookie 的方式，當然也可以使用 localStorage 和 sessionStorage 存儲這個身份標識，大家可以依據自身需求進行使用。
• 需要注意的是， session 為一個會話，當頁面不同即使是同一頁面打開兩次，也被視為同一次會話。
• 服務器使用 session 把用戶的信息臨時保存在了服務器上，用戶離開網站后 session 會被銷毀。
• 這種用戶信息存儲方式相對 cookie 來說更安全，但是 session 有一個缺陷：如果web服務器做了負載均衡，那么下一個操作請求到了另一臺服務器的時候 session 會丟失。

綜上所述，對session做個總結：

• 當程序需要為某個客戶端的請求創建一個 session 時，服務器首先檢查這個客戶端的請求里是否已包含了一個 session 標識（ 稱為 sessionId ），如果已包含則說明以前已經為此客戶端創建過 session ，服務器就按照此 sessionId 把其對應的 session 檢索出來使用（檢索不到，會新建一個）；反之，如果客戶端請求不包含 sessionId ，則為客戶端創建一個 session 并且生成一個與此 session 相關聯的 sessionId ， sessionId 的值應該是一個既不會重復，又不容易被找到規律以仿造的字符串，這個 sessionId 將被在本次響應中返回給客戶端保存。保存這個 sessionId 的方式可以采用 cookie ，也可以是 locaStorage 和 sessionStorage ，這樣在交互過程中瀏覽器可以自動的按照規則把這個標識發送給服務器。

（2）Token

• 在Web領域基于 Token 的身份驗證隨處可見。在大多數使用 Web API 的互聯網公司中， token 是多用戶下處理認證的最佳方式。

• 以下幾點特性會讓你在程序中使用基于 Token 的身份驗證：

  • 無狀態、可擴展；
  • 支持移動設備；
  • 跨程序調用；
  • 安全。

• 大部分你見到過的 API 和 Web 應用都使用 token 。例如 Facebook , Twitter , Google , GitHub 等。

四、結束語

cookie、loacalStorage和sessionStorage是面試中老生常談的問題了。在學習的過程中，要理解好cookie、localStorage和sessionStorage的關系，以及session、sessionId和cookie的關系，只有把它們這幾個之間的關系弄明白了，自己才不會一直深陷在一個關系雜圈中。

關于瀏覽器存儲的內容就講到這里啦！如有疑問或文章有講的不好的地方歡迎評論區評論或私信我交流~

• 關注公眾號 星期一研究室 ，不定期分享學習干貨

• 如果這篇文章對你有用，記得點個贊加個關注再走哦~

總結

以上是生活随笔為你收集整理的解决浏览器存储问题，不得不了解的cookie,localStorage和sessionStorage的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。