前端持久化之瀏覽器存儲技術（localStorage、sessionStorage 、session、cookies）

表格一覽

特性	cookie	localStorage	sessionStorage	indexDB
數據生命週期	一般由服務器生成，可以設置過期時間；前端採用和js-cookie等組件也可以生成	除非被清理，否則一直存在；瀏覽器關閉還會保存在本地，但是不支持跨瀏覽器	頁面關閉就清理刷新依然存在，不支持跨頁面交互	除非被清理，否則一直存在
數據存儲大小	4K	5M	5M	不限制大小
與服務端通信	每次都會攜帶在請求的header 中，對於請求性能有影響；同時由於請求中都帶有，所以也容易出現安全問題	不參與	不參與	不參與
特點	字符串鍵值對在本地存儲數據	字符串鍵值對在本地存儲數據	字符串鍵值對在本地存儲數據	IndexedDB 是一個非關係型數據庫（不支持通過 SQL 語句操作）。可以存儲大量數據，提供接口來查詢，還可以建立索引，這些都是其他存儲方案無法提供的能力。

瀏覽器可以直接查看本地存儲的數據

如下圖：

cookie 不建議用於存儲業務數據，因為前端接口請求的時候請求頭都會攜帶cookie，浪費帶寬資源，一般只用於存儲登錄狀態信息； 對於不怎麼改變的數據儘量使用 localStorage 存儲，否則可以用 sessionStorage 存儲。

注意點：

• HTML5本地存儲只能存字符串，任何格式存儲的時候都會被自動轉為字符串，所以讀取的時候，需要自己進行類型的轉換。
• 要注意在前端操作的存儲和後端數據庫存儲一樣都是異步的，即取的時候有可能會出現還沒存好的可能。

介紹：

Web Storage實際上由兩部分組成：sessionStorage與localStorage。

Web Storage帶來的好處：

1.減少網絡流量：一旦數據保存在本地後，就可以避免再向服務器請求數據，減少不必要的數據請求，且減少數據在瀏覽器和服務器間不必要地來回傳遞。

2.快速顯示數據：性能好，從本地讀數據比通過網絡從服務器獲得數據快得多，本地數據可以即時獲得。再加上網頁本身也可以有緩存，因此整個頁面和數據都在本地的話，可以立即顯示。

3. 存儲空間更大：IE8下每個獨立的存儲空間為10M，其他瀏覽器實現略有不同，但都比Cookie要大很多。

4. 存儲內容不會發送到服務器：當設置了Cookie後，Cookie的內容會隨着請求一併發送的服務器，這對於本地存儲的數據是一種帶寬浪費。而Web Storage中的數據則僅僅是存在本地，不會與服務器發生任何交互。

5. 更多豐富易用的接口：Web Storage提供了一套更為豐富的接口，使得數據操作更為簡便（如：getItem\setItem）。

6. 獨立的存儲空間：每個域（包括子域）有獨立的存儲空間，各個存儲空間是完全獨立的，因此不會造成數據混亂。

localStorage

單個localStorage的大小受限，可以用多個iframe方式使用多個域名來突破單個頁面下localStorage存儲數據的最大限制。

特別説明：瀏覽器多個標籤頁打開同個域名時，localStorage內容一般是共享的。其位置這可以監聽事件“storage”來做一致性操作響應處理。這樣會導致如下現象：

標籤頁一：通過某行為修改localStorage中某個屬性值，然後數據接口依賴該屬性值；

標籤頁二：由於localStorage標籤頁間共享，導致標籤頁二數據不準確！

localStorage.setItem("type","1")  // 使瀏覽器在其localStorage內存中存儲一個叫type的屬性 ，其值為1；
localStorage.getItem("type")       // 獲取localStorage中相應屬性
複製代碼

sessionStorage

和localStorage功能類似，但是sessionStorage在瀏覽器關閉時會自動清空。

sessionStorage、localStorage、cookie都是在瀏覽器端存儲的數據，其中sessionStorage的概念很特別，引入了一個“瀏覽器窗口”的概念。

sessionStorage是在同源的同窗口（或tab）中，始終存在的數據。也就是説只要這個瀏覽器窗口沒有關閉，即使刷新頁面或進入同源另一頁面，數據仍然存在。關閉窗口後，sessionStorage即被銷燬。同時“獨立”打開的不同窗口，即使是同一頁面，sessionStorage對象也是不同的。

臨時存儲：很多時候數據只需要在用户瀏覽一組頁面期間使用，關閉窗口後數據就可以丟棄了，這種情況使用sessionStorage非常方便。

使用方法

//存儲
window.sessionStorage.setItem("token","adfasfasfasfd")
//取出
sessionStroage.getItem("mykey")
sessionStroage.mykey
//清除
sessionStroage.clear()
複製代碼

Cookie

Cookie為了辨別用户身份或Session跟蹤而存儲在用户瀏覽器端的數據。Cookie一般會通過HTTP請求發送給服務器端。 

cookie過期等配置 Cookie分為：Session Cookie和持久型Cookie。Cookie設置中有個HttpOnly參數，前端瀏覽器使用document.cookie是讀取不到HttpOnly類型的Cookie的，被設置為HttpOnly的Cookie記錄只能通過HTTP請求頭髮送到服務器端進行讀寫操作，這樣就避免了服務器的Cookie記錄被前端javascript修改，保證了服務器驗證Cookie的安全性。

cookie的內容主要包括：名字，值，過期時間，路徑和域。路徑與域一起構成cookie的作用範圍。若不設置過期時間，則表示這個cookie的生命期為瀏覽器會話期間，關閉瀏覽器窗口，cookie就消失。

這種生命期為瀏覽器會話期的cookie被稱為會話cookie。會話cookie一般不存儲在硬盤上而是保存在內存裏。若設置了過期時間，瀏覽器就會把cookie保存到硬盤上，關閉後再次打開瀏覽器，這些cookie仍然有效直到超過設定的過期時間。存儲在硬盤上的cookie可以在不同的瀏覽器進程間共享，比如兩個IE窗口。而對於保存在內存裏的cookie，不同的瀏覽器有不同的處理方式。

session

session機制是一種服務器端的機制，服務器使用一種類似於散列表的結構（也可能就是使用散列表）來保存信息。當程序需要為某個客户端的請求創建一個session時，服務器首先檢查這個客户端的請求裏是否已包含了一個session標識（稱為session id），如果已包含則説明以前已經為此客户端創建過session，服務器就按照session id把這個session檢索出來使用（檢索不到，會新建一個），如果客户端請求不包含session id，則為此客户端創建一個session並且生成一個與此session相關聯的session id，session id的值應該是一個既不會重複，又不容易被找到規律以仿造的字符串，這個session id將被在本次響應中返回給客户端保存。

其他存儲方式（瞭解）

WebSQL：二維表的形成存儲大量數據到客户端，但目前只有Chrome瀏覽器有。

IndexDB：在客户端存儲大量結構化數據並且在這些數據上使用索引進行高性能檢索的一套API，類似於NoSQL。 Application Cache： 通過manifest配置文件在本地有選擇性地存儲javascript、css、圖片等靜態資源文件的文件緩存機制，已廢棄。

cacheStorage：在ServiceWorker規範中定義的，用於保存每個ServiceWorker（後續博文會單獨介紹）聲明的Cache對象，未來可能替代Application Cache的離線方案。

Flash緩存：主要基於Flash，具有讀寫瀏覽器本地目錄的功能。

sessionStorage 、localStorage 和 cookie 比較

共同點：都是保存在瀏覽器端，且同源的。 區別：

• 是否隨請求傳遞

  cookie數據始終在同源的http請求中攜帶（即使不需要），即cookie在瀏覽器和服務器間來回傳遞。 而sessionStorage和localStorage不會自動把數據發給服務器，僅在本地保存。 cookie數據還有路徑（path）的概念，可以限制cookie只屬於某個路徑下。

• 存儲大小限制不同

  cookie數據不能超過4k，同時因為每次http請求都會攜帶cookie，所以cookie只適合保存很小的數據，如會話標識。 sessionStorage和localStorage 雖然也有存儲大小的限制，但比cookie大得多，可以達到5M或更大。

• 數據有效期不同

  sessionStorage：僅在當前瀏覽器窗口關閉前有效，自然也就不可能持久保持； localStorage：始終有效，窗口或瀏覽器關閉也一直保存，因此用作持久數據； 但是隻保存在當前這個瀏覽器中，換了瀏覽器，數據就會是另一個瀏覽器打開時保存的數據，因為這些數據都是存儲在瀏覽器中的； cookie只在設置的cookie過期時間之前一直有效，即使窗口或瀏覽器關閉。

• 作用域不同

  sessionStorage不在不同的瀏覽器窗口中共享，即使是同一個頁面； localStorage 在所有同源窗口中都是共享的； cookie也是在所有同源窗口中都是共享的。

cookie 和session比較

區別：

1、cookie數據存放在客户的瀏覽器上，session數據放在服務器上。

2、cookie不是很安全，別人可以分析存放在本地的COOKIE並進行COOKIE欺騙

3、session會在一定時間內保存在服務器上。當訪問增多，會比較佔用你服務器的性能

4、單個cookie保存的數據不能超過4K，很多瀏覽器都限制一個站點最多保存20個cookie。

5、所以個人建議：    將登陸信息等重要信息存放為SESSION    其他信息如果需要在每個請求中攜帶，可以放在COOKIE中    其他本地化的緩存數據存儲在Web Storage

案例代碼：

const STORAGE_KEY = 'todo-vuejs'//相當於本網頁的數據庫名稱
export default {
	fetch:function(){
		// parse 用於從一個字符串中解析出json 對象。
		return JSON.parse(window.localStorage.getItem(STORAGE_KEY) || '[]')
	},
	save:function(items){
		// .stringify用於從一個對象解析出字符串
		window.localStorage.setItem(STORAGE_KEY,JSON.stringify(items))
	},
	/*
		獲取數組長度
	*/
	getLength:function(){
		return JSON.parse(window.localStorage.getItem(STORAGE_KEY) || '[]').length;
	},
	/*
		作用：返回數組最後一位的鍵名所對應的值
		輸入參數：@keyName 需要獲取值的鍵名
	*/
	getLastKey:function(keyName){
		let arr = JSON.parse(window.localStorage.getItem(STORAGE_KEY) || '[]');
		for(let key in arr[arr.length-1]){
			if(key == keyName){
				return arr[arr.length-1][keyName]
			}else{
				return 0;
			}
		}
	},
	clear:function(){
		window.localStorage.clear(); 
	}
}
複製代碼