瀏覽器本地存盤

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

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()
  

標籤：其他

上一篇：如何實時更新wire:model的值

下一篇：CSS 漸變鋸齒消失術