瀏覽器存儲(chǔ)方式

• 一、瀏覽器存儲(chǔ)的方式
• 二、cookie、localStorage和sessionStorage
• • 1、cookie、localStorage和sessionStorage是什么？
  • • （1）cookie
    • （2）localStorage
    • （3）sessionStorage
  • 2、cookie、localStorage和sessionStorage的異同點(diǎn)
  • • （1）三者的相同點(diǎn)在于：
    • （2）三者的區(qū)別在于：
  • 3、cookie的用途
  • • （1）保存用戶登錄狀態(tài)
    • （2）跟蹤用戶行為
• 三、session和token
• • • （1）Session
    • （2）Token
• 四、結(jié)束語(yǔ)

要說(shuō)瀏覽器存儲(chǔ)的方式，我們聽(tīng)到最多的莫過(guò)于就是cookie，localStorage和sessionStorage了。那這三者之前有什么區(qū)別，cookie與session、sessionId又有什么關(guān)系呢？接下來(lái)我們一起來(lái)了解一下吧！

一、瀏覽器存儲(chǔ)的方式

特性cookielocalStoragesessionStorageindexedDB

數(shù)據(jù)生命周期	一般由服務(wù)器生成，可以設(shè)置過(guò)期時(shí)間	除非被清理，否則一直存在	頁(yè)面關(guān)閉就清理	除非被清理，否則一直存在
數(shù)據(jù)存儲(chǔ)大小	4K	5M	5M	無(wú)限
與服務(wù)端通信	每次都會(huì)攜帶在header中，對(duì)于請(qǐng)求性能有一定影響	不參與	不參與	不參與

補(bǔ)充：cookie 原本并不是用來(lái)儲(chǔ)存的，而是用來(lái)與服務(wù)端通信的，需要存取請(qǐng)自行封裝 api。

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

localStorage 注意點(diǎn)：

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

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

二、cookie、localStorage和sessionStorage

1、cookie、localStorage和sessionStorage是什么？

（1）cookie

• cookie 是一個(gè)非常具體的東西，指的就是瀏覽器里面能永久存儲(chǔ)的一種數(shù)據(jù)，僅僅是瀏覽器實(shí)現(xiàn)的一種數(shù)據(jù)存儲(chǔ)功能。

• cookie 由服務(wù)器生成，發(fā)送給瀏覽器，瀏覽器把 cookie 以kv的形式保存到某個(gè)目錄下的文本文件內(nèi)，下一次請(qǐng)求同一網(wǎng)站時(shí)會(huì)把該 cookie 發(fā)送給服務(wù)器。

• cookie 的過(guò)期時(shí)間由客戶端設(shè)置。若不設(shè)置過(guò)期時(shí)間，則表示這個(gè) cookie 的生命期為瀏覽器會(huì)話期間，關(guān)閉瀏覽器窗口， cookie 就會(huì)消失。這種生命期為瀏覽器會(huì)話期的 cookie 被稱為會(huì)話cookie。如果設(shè)置了過(guò)期時(shí)間，則在設(shè)置的 cookie 過(guò)期時(shí)間之前一直有效，即使窗口或?yàn)g覽器關(guān)閉也會(huì)一直有效。

• 會(huì)話cookie一般不存儲(chǔ)在硬盤而是保存在內(nèi)存里，當(dāng)然這個(gè)行為并不是規(guī)范規(guī)定的。若設(shè)置了過(guò)期時(shí)間，瀏覽器就會(huì)把cookie保存到硬盤上，關(guān)閉后再打開(kāi)瀏覽器后這些 cookie 仍然有效直到超過(guò)設(shè)定的過(guò)期時(shí)間。對(duì)于保存在內(nèi)存里的 cookie ，不同的瀏覽器有不同的處理方式。

• 可用 document.cookie = "" 來(lái)設(shè)置 cookie 的值。cookie的值是鍵值對(duì)的形式存在，當(dāng)設(shè)置的鍵一樣時(shí)，會(huì)覆蓋掉原先的值。當(dāng)鍵不一樣時(shí)，對(duì)進(jìn)行疊加操作。這里附上一篇我看過(guò)覺(jué)得比較好理解的關(guān)于如何設(shè)置cookie的文章，大家可以根據(jù)自身需求進(jìn)行查看~

（2）localStorage

• 始終有效，窗口或?yàn)g覽器關(guān)閉也一直保存，因此用作持久數(shù)據(jù)；
• 同源窗口都會(huì)共享，并且不會(huì)失效，不管窗口或者瀏覽器關(guān)閉與否都會(huì)始終生效。

（3）sessionStorage

• 瀏覽器存儲(chǔ)的一種形式。

• 僅在當(dāng)前瀏覽器窗口關(guān)閉前有效，不可能持久保持。

• 在相同瀏覽器里，如果是在當(dāng)前頁(yè)面里面跳轉(zhuǎn)進(jìn)入一個(gè)新的頁(yè)面，可以共享；而如果是直接打開(kāi)一個(gè)新的頁(yè)面，不能共享。

2、cookie、localStorage和sessionStorage的異同點(diǎn)

（1）三者的相同點(diǎn)在于：

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

（2）三者的區(qū)別在于：

• 與服務(wù)器通信不同：

  cookie 數(shù)據(jù)始終在同源的 http 請(qǐng)求中攜帶（即使不需要），即 cookie 在瀏覽器和服務(wù)器間來(lái)回傳遞，而sessionStorage和localStorage不會(huì)自動(dòng)把數(shù)據(jù)發(fā)送給服務(wù)器，僅在本地保存；

  cookie 會(huì)隨著 http 請(qǐng)求被發(fā)送出去，而 loacalStorage 和 sessionStorage 不會(huì)隨著 http 請(qǐng)求被發(fā)送出去。

  cookie 數(shù)據(jù)還有路徑（path）的概念，可以限制 cookie 只屬于某個(gè)路徑下。

• 存儲(chǔ)大小限制也不同：

  cookie 數(shù)據(jù)不能超過(guò)4K，同時(shí)因?yàn)槊看?http 請(qǐng)求都會(huì)攜帶 cookie、所以 cookie 只適合保存很小的數(shù)據(jù)，如會(huì)話標(biāo)識(shí)；

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

• 數(shù)據(jù)有效期不同：

  sessionStorage ：僅在當(dāng)前瀏覽器窗口關(guān)閉之前有效；

  localStorage ：始終有效，窗口或?yàn)g覽器關(guān)閉也一直保存，因此用作持久數(shù)據(jù)；

  cookie ：只在設(shè)置的 cookie 過(guò)期時(shí)間之前有效，即使窗口關(guān)閉或?yàn)g覽器關(guān)閉。

• 作用域不同：

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

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

3、cookie的用途

（1）保存用戶登錄狀態(tài)

例如將用戶 id 存儲(chǔ)于一個(gè) cookie 內(nèi)，這樣當(dāng)用戶下次訪問(wèn)該頁(yè)面 時(shí)就不需要重新登錄了，現(xiàn)在很多論壇和社區(qū)都提供這樣的功能。

cookie 還可以設(shè)置過(guò)期時(shí)間，當(dāng)超過(guò)時(shí)間期限后，cookie 就會(huì)自動(dòng)消失。因此，系統(tǒng)往往可以提示用戶保持登錄狀態(tài)的時(shí)間：常見(jiàn)選項(xiàng)有一個(gè)月、三個(gè) 月、一年等。

（2）跟蹤用戶行為

例如一個(gè)天氣預(yù)報(bào)網(wǎng)站，能夠根據(jù)用戶選擇的地區(qū)顯示當(dāng)?shù)氐奶鞖馇闆r。 如果每次都需要選擇所在地是繁瑣的，當(dāng)利用了 cookie 后就會(huì)顯得很人性化了，系統(tǒng)能夠記住上一次訪問(wèn)的地區(qū)，當(dāng)下次再打開(kāi)該頁(yè)面時(shí)，它就會(huì)自動(dòng)顯示上次用戶所在地區(qū) 的天氣情況。

因?yàn)橐磺卸际窃诤笈_(tái)完成，所以這樣的頁(yè)面就像為某個(gè)用戶所定制的一樣，使用起來(lái)非常方便定制頁(yè)面。如果網(wǎng)站提供了換膚或更換布局的功能，那么可以使用 cookie 來(lái)記錄用戶的選項(xiàng)，例如：背景色、分辨率等。當(dāng)用戶下次訪問(wèn)時(shí)，仍然可以保存上一次訪問(wèn)的界面風(fēng)格。

三、session和token

（1）Session

舉個(gè)例子：

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

綜上所述，對(duì)session做個(gè)總結(jié)：

• 當(dāng)程序需要為某個(gè)客戶端的請(qǐng)求創(chuàng)建一個(gè) session 時(shí)，服務(wù)器首先檢查這個(gè)客戶端的請(qǐng)求里是否已包含了一個(gè) session 標(biāo)識(shí)（ 稱為 sessionId ），如果已包含則說(shuō)明以前已經(jīng)為此客戶端創(chuàng)建過(guò) session ，服務(wù)器就按照此 sessionId 把其對(duì)應(yīng)的 session 檢索出來(lái)使用（檢索不到，會(huì)新建一個(gè)）；反之，如果客戶端請(qǐng)求不包含 sessionId ，則為客戶端創(chuàng)建一個(gè) session 并且生成一個(gè)與此 session 相關(guān)聯(lián)的 sessionId ， sessionId 的值應(yīng)該是一個(gè)既不會(huì)重復(fù)，又不容易被找到規(guī)律以仿造的字符串，這個(gè) sessionId 將被在本次響應(yīng)中返回給客戶端保存。保存這個(gè) sessionId 的方式可以采用 cookie ，也可以是 locaStorage 和 sessionStorage ，這樣在交互過(guò)程中瀏覽器可以自動(dòng)的按照規(guī)則把這個(gè)標(biāo)識(shí)發(fā)送給服務(wù)器。

（2）Token

• 在Web領(lǐng)域基于 Token 的身份驗(yàn)證隨處可見(jiàn)。在大多數(shù)使用 Web API 的互聯(lián)網(wǎng)公司中， token 是多用戶下處理認(rèn)證的最佳方式。

• 以下幾點(diǎn)特性會(huì)讓你在程序中使用基于 Token 的身份驗(yàn)證：

  • 無(wú)狀態(tài)、可擴(kuò)展；
  • 支持移動(dòng)設(shè)備；
  • 跨程序調(diào)用；
  • 安全。

• 大部分你見(jiàn)到過(guò)的 API 和 Web 應(yīng)用都使用 token 。例如 Facebook , Twitter , Google , GitHub 等。

四、結(jié)束語(yǔ)

cookie、loacalStorage和sessionStorage是面試中老生常談的問(wèn)題了。在學(xué)習(xí)的過(guò)程中，要理解好cookie、localStorage和sessionStorage的關(guān)系，以及session、sessionId和cookie的關(guān)系，只有把它們這幾個(gè)之間的關(guān)系弄明白了，自己才不會(huì)一直深陷在一個(gè)關(guān)系雜圈中。

關(guān)于瀏覽器存儲(chǔ)的內(nèi)容就講到這里啦！如有疑問(wèn)或文章有講的不好的地方歡迎評(píng)論區(qū)評(píng)論或私信我交流~

• 關(guān)注公眾號(hào) 星期一研究室 ，不定期分享學(xué)習(xí)干貨

• 如果這篇文章對(duì)你有用，記得點(diǎn)個(gè)贊加個(gè)關(guān)注再走哦~

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。