瀏覽器本地存儲

一、瀏覽器本地存儲方式及使用場景

1.Cookie

• 概念：Cookie是最早被提出來的本地存儲方式，在此之前，服務端是無法判斷網路中的兩個請求是否是同一用戶發起的，為解決這個問題，Cookie就出現了。Cookie的大小隻有4kb，它是一種純文本文件，每次發起HTTP請求都會攜帶Cookie。

• 特性：

  • Cookie一旦創建成功，名稱就無法修改
  • Cookie是無法跨功能變數名稱的，也就是說a功能變數名稱和b功能變數名稱下的cookie是無法共用的，這也是由Cookie的隱私安全性決定的，這樣就能夠阻止非法獲取其他網站的Cookie
  • 每個功能變數名稱下Cookie的數量不能超過20個，每個Cookie的大小不能超過4kb
  • 有安全問題，如果Cookie被攔截了，那就可獲得session的所有信息，即使加密也於事無補，無需知道cookie的意義，只要轉發cookie就能達到目的
  • Cookie在請求一個新的頁面的時候都會被髮送過去

• 使用場景：

  • 最常見的使用場景就是Cookie和session結合使用，我們將sessionId存儲到Cookie中，每次發請求都會攜帶這個sessionId，這樣服務端就知道是誰發起的請求，從而響應相應的信息。（cookie與session都可用於身份認證）
  • 可以用來統計頁面的點擊次數

• Cookie的欄位及作用：

  • 伺服器端可以使用 Set-Cookie 的響應頭部來配置 cookie 信息。一條cookie 包括了5個屬性值 expires、domain、path、secure、HttpOnly。其中 expires 指定了 cookie 失效的時間，domain 是功能變數名稱、path是路徑，domain 和 path 一起限制了 cookie 能夠被哪些 url 訪問。secure 規定了 cookie 只能在確保全全的情況下傳輸，HttpOnly 規定了這個 cookie 只能被伺服器訪問，不能使用 js 腳本訪問

  • Name：cookie的名稱

  • Value：cookie的值，對於認證cookie，value值包括web伺服器所提供的訪問令牌

  • Size： cookie的大小

  • Path：可以訪問此cookie的頁面路徑。 比如domain是abc.com，path是/test，那麼只有/test路徑下的頁面可以讀取此cookie。

  • Secure： 指定是否使用HTTPS安全協議發送Cookie。使用HTTPS安全協議，可以保護Cookie在瀏覽器和Web伺服器間的傳輸過程中不被竊取和篡改。該方法也可用於Web站點的身份鑒別，即在HTTPS的連接建立階段，瀏覽器會檢查Web網站的SSL證書的有效性。但是基於相容性的原因（比如有些網站使用自簽署的證書）在檢測到SSL證書無效時，瀏覽器並不會立即終止用戶的連接請求，而是顯示安全風險信息，用戶仍可以選擇繼續訪問該站點

  • Domain：可以訪問該cookie的功能變數名稱，Cookie 機制並未遵循嚴格的同源策略，允許一個子域可以設置或獲取其父域的 Cookie。當需要實現單點登錄方案時，Cookie 的上述特性非常有用，然而也增加了 Cookie受攻擊的危險，比如攻擊者可以藉此發動會話定置攻擊。因而，瀏覽器禁止在 Domain 屬性中設置.org、.com 等通用頂級功能變數名稱、以及在國家及地區頂級域下註冊的二級功能變數名稱，以減小攻擊發生的範圍

  • HTTP： 該欄位包含HTTPOnly 屬性 ，該屬性用來設置cookie能否通過腳本來訪問，預設為空，即可以通過腳本訪問。在客戶端是不能通過js代碼去設置一個httpOnly類型的cookie的，這種類型的cookie只能通過服務端來設置。該屬性用於防止客戶端腳本通過document.cookie屬性訪問Cookie，有助於保護Cookie不被跨站腳本攻擊竊取或篡改。但是，HTTPOnly的應用仍存在局限性，一些瀏覽器可以阻止客戶端腳本對Cookie的讀操作，但允許寫操作；此外大多數瀏覽器仍允許通過XMLHTTP對象讀取HTTP響應中的Set-Cookie頭

  • Expires/Max-size ： 此cookie的超時時間。若設置其值為一個時間，那麼當到達此時間後，此cookie失效。不設置的話預設值是Session，意思是cookie會和session一起失效。當瀏覽器關閉(不是瀏覽器標簽頁，而是整個瀏覽器) 後，此cookie失效

2.LocalStorage

• 概念：LocalStorage是HTML5新引入的特性，由於有的時候我們存儲的信息較大，Cookie就不能滿足我們的需求，這時候LocalStorage就派上用場了。永久存儲，不會隨著刷新頁面或者關閉頁面而消失。

• 優點：

  • 在大小方面，LocalStorage的大小一般為5MB，可以儲存更多的信息
  • LocalStorage是持久儲存，並不會隨著頁面的關閉而消失，除非主動清理，不然會永久存在
  • 僅儲存在本地，不像Cookie那樣每次HTTP請求都會被攜帶

• 缺點：

  • 存在瀏覽器相容問題，IE8以下版本的瀏覽器不支持
  • 如果瀏覽器設置為隱私模式，那我們將無法讀取到LocalStorage
  • LocalStorage受到同源策略的限制，即埠、協議、主機地址有任何一個不相同，都不會訪問

• 使用場景：

  • 有些網站有換膚的功能，這時候就可以將換膚的信息存儲在本地的LocalStorage中，當需要換膚的時候，直接操作LocalStorage即可
  • 在網站中的用戶瀏覽信息也會存儲在LocalStorage中，還有網站的一些不常變動的個人信息等也可以存儲在本地的LocalStorage中

• 常用API

  // 保存數據到localStorage
  localStorage.setItem('key', 'value')
  // 從localStorage中獲取數據
  localStorage.getItem('key')
  // 從localStorage中刪除某一數據
  localStorage.removeItem('key')
  // 從localStorage刪除所有數據
  localStorage.clear()
  

3.SessionStorage

• 概念：SessionStorage和LocalStorage都是在HTML5才提出來的存儲方案，SessionStorage 主要用於臨時保存同一視窗(或標簽頁)的數據，刷新頁面時不會刪除，關閉視窗或標簽頁之後將會刪除這些數據。

• 與LocalStorage對比：

  • SessionStorage和LocalStorage都在本地進行數據存儲
  • SessionStorage也有同源策略的限制，但是SessionStorage有一條更加嚴格的限制，SessionStorage只有在同一瀏覽器的同一視窗下才能夠共用
  • LocalStorage和SessionStorage都不能被爬蟲爬取

• 使用場景：

  • 由於SessionStorage具有時效性，所以可以用來存儲一些網站的游客登錄的信息，還有臨時的瀏覽記錄的信息。當關閉網站之後，這些信息也就隨之消除了

• 常用API

  // 保存數據到sessionStorage
  sessionStorage.setItem('key', 'value')
  // 從sessionStorage中獲取數據
  sessionStorage.getItem('key')
  // 從sessionStorage中刪除某一數據
  sessionStorage.removeItem('key')
  // 從sessionStorage刪除所有數據
  sessionStorage.clear()