談談HTML5本地存儲——WebStorage

• 瀏覽器本地存儲概述 
  簡介 
  cookie 
  

  cookie是指某些網站爲了辨別用戶身份、進行 session 跟蹤而儲存在用戶本地終端上的數據(通常經過加密)。

  
  webStorage 
  

  webStorage是HTML5中本地存儲的解決方案之一,包括sessionStorag和localStorage,兩者差別就差在生命週期的不同而已。

  
  三者對比 
  
  類型 
  生命週期 
  存儲大小 
  與服務器通信 
  作用域 
  
  
  Cookie 
  一般由服務器生成,可設置過期時間,默認是關閉瀏覽器後失效 
  4k左右 
  可每次攜帶在http頭部中,但保存過多數據會帶來性能問題 
  可通過.setDomain設置主域名共享 
  localStorage 
  永久保存,除非被清除 
  5m左右 
  只能存儲在瀏覽器端 
  子域名之間相互獨立 
  sessionStorage 
  僅存在當前標籤頁下,關閉瀏覽器或者新建標籤頁都爲空 
  5m左右 
  只能存儲在瀏覽器端 
  不同tab之間無法共享 
  
  

  【tip】sessionStorage只能在一個標籤頁下共享,即如果你從當前標籤頁下新打開一個該網頁的頁面,sessionStorage數據也是清空的。不過如果你恢復關閉的頁面的話,在chrome和firefox下sessionStorage也會被恢復,不過safari不會。

  
  webStorage的兼容性 
  
  
  Chrome 
  Firefox 
  IE 
  Opera 
  Safari 
  
  
  localStorage 
  4 
  3.5 
  8 
  10.50 
  4 
  sessionStorage 
  5 
  2 
  8 
  10.50 
  4 
  
  

  基本瀏覽器都是支持的

  
  webStorage API 
  

  localStorage和sessionStorage的用法是一樣的,下面展示sessionStorage的使用例子。

  
  // 保存數據到sessionStorage 
  sessionStorage.setItem('key', 'value'); 
  // 從sessionStorage獲取數據 
  var data = sessionStorage.getItem('key'); 
  // 從sessionStorage刪除保存的數據 
  sessionStorage.removeItem('key'); 
  // 從sessionStorage刪除所有保存的數據 
  sessionStorage.clear(); 
  //枚舉sessionStorage的方法 
  for(var i=0;i<sessionStorage.length;i++){ 
  var key = sessionStorage.key(i); 
  var value =sessionStorage.getItem(key); 
  } 
  
  

  當然,你也可以直接用對象的賦值方式來設置

  
  sessionStorage['colorSetting'] = '#a4509b'; 
  sessionStorage.setItem('colorSetting', '#a4509b'); 
  
  

  不過,官方建議只用webStorage API(getItem, removeItem, key, length),來避免使用對象鍵值存儲的一些缺陷,缺陷詳情請點擊 這裏

  
  storage事件 
  

  webStorage還有storage事件。當storage發生改變,storage事件就會被觸發。

  
  

  這裏的的條件是數據發生了變化,如果當前的存儲區域是空的,即使再調用clear()也不會觸發事件。或者你通過setItem()來設置一個與現有值相同的值,事件也是不會觸發的。

  
  storage 屬性 
  
  屬性名 
  描述 
  
  
  key 
  代表屬性名發生變化.當被clear()方法清除之後所有屬性名變爲null. Read only(只讀). 
  newValue 
  新添加進的值.當被clear()方法執行過或者被屬性名被刪除,值會成爲null Read only(只讀). 
  oldValue 
  原始值.被clear()方法執行過則變爲null,或者被新值取代。 Read only(只讀). 
  storageArea 
  被操作的storage對象. Read only(只讀). 
  url 
  key發生改變的對象所對應的文檔的URL地址.。 Read only(只讀). 
  
  

  下面介紹多標籤頁面使用sessionStorage時會有使用栗子。

  
  多標籤頁面使用sessionStorage 
  

  在最近使用vuejs寫完全前後端分離的項目時,在做登錄認證的時候,在想到底怎麼存儲用戶認證信息。

  
  

  因爲系統安全要求等級比較高,要求用戶關閉標籤頁的時候會話立刻到期,使用cookie來保存敏感的token就不太合適了。如果使用localstorage,頁面關閉後localstorage數據還在,也不太滿足要求。

  
  

  想着只能使用sessionStorage。

  
  

  不過尷尬的是,使用sessionStorage是無法再多標籤頁面共享的。每次打開新標籤頁,就會跳轉到登錄頁面,用戶體驗不太友好,查了一下資料,看到一博客是翻譯了一外國小哥使用storage事件實現跨標籤頁共享sessionStorage的文章,學習了,點擊 這裏看該博客 。

  
  

  簡單來講就是,如果新標籤頁如果沒有sessionStorage數據,就會觸發一個localstorage修改事件,那麼在已存在的標籤裏收到這個事件後,就會將當前頁的sessionStorage數據保存在localstorage中,但是馬上移除。但是在新標籤頁裏會監聽到該事件,可以獲取到這個sessionStorage數據,那這樣就保證了新標籤頁也能獲取sessionStorage,也保證localstorage中不存在token信息。

  
  (function(){ 
  if (!sessionStorage.length) { 
  // 如果當前頁沒有sessionStorage數據,就觸發一個事件。 
  localStorage.setItem('getSessionStorage', Date.now()); 
  }; 
  window.addEventListener('storage', function(event){ 
  //console.log('storage event', event); 
  if (event.key == 'getSessionStorage') { 
  // 已存在的標籤頁收到該事件後,講sessionStorage數據存到localstorage中,並馬上移除。 
  localStorage.setItem('sessionStorage', JSON.stringify(sessionStorage)); 
  localStorage.removeItem('sessionStorage'); 
  } else if (event.key == 'sessionStorage' &;&; !sessionStorage.length) { 
  // 新標籤頁會在這裏監聽到事件,通過newValue這個屬性獲取當時存儲在localstorage的sessionStorage數據 
  var data = JSON.parse(event.newValue),value; 
  console.log(data,"111"); 
  for (key in data) { 
  sessionStorage.setItem(key, data[key]); 
  } 
  } 
  }); 
  })(); 
  
  

  參考

  
  

  http://blog.kazaff.me/2016/09/09/%E8%AF%91-%E5%9C%A8%E5%A4%9A%E4%B8%AA%E6%A0%87%E7%AD%BE%E9%A1%B5%E4%B9%8B%E9%97%B4%E5%85%B1%E4%BA%ABsessionStorage/?utm_source=tuicool&;utm_medium=referral

  
  

  https://blog.guya.net/2015/06/12/sharing-sessionstorage-between-tabs-for-secure-multi-tab-authentication/

  
  https://developer.mozilla.org/zh-CN/docs/Web/API/Window/sessionStorage 
  
  

以上是談談HTML5本地存儲——WebStorage的內容，更多 WebStorage 談談 存儲 本地 html5 的內容，請您使用右上方搜索功能獲取相關信息。