瀏覽器資料儲存方式總結
今天主要來講下前端的資料儲存，說起資料儲存，大家肯定第一時間想起cookie，localstorage，sessionstorage，而其實還有userData和IndexedDB這兩種資料儲存，接下來將對它們進行一個比較詳細的總結
一、為什麼要進行資料儲存
隨著Web應用程式的出現，慢慢的也開始產生了對於能夠直接在客戶端上儲存使用者資訊能力的要求，我們知道當我們訪問某個頁面的時候，很多東西都需要從伺服器端進行載入，如果這個時候能將一些東西儲存在客戶端的話，是不是就可以直接拿來用啦，方便快捷，速度又快，又可以節省了很多不必要的請求，為什麼不用呢？
其實在我實習的時候，曾經做過一個功能，當某條廣告更新的時候右上角出現小紅點，使用者點選過後就不出現小紅點，直到廣告更新的時候小紅點再出現，這個功能當時我就用到了客戶端資料儲存來實現啦，其實像一些登入資訊，偏好設定都可以儲存在客戶端，而首先進行客戶端儲存的方案就是cookie，而今天，cookie只是在客戶端儲存資料的其中一種方式，接下來，我們將介紹各種客戶端的資料儲存方式
二、cookie
1、cookie的作用
說到cookie，其實cookie有兩個主要功能，第一個功能就是用於解決http無狀態的缺點 ，在客戶端儲存會話資訊，記錄使用者的狀態，而第二個功能也就是我們現在也經常使用cookie在客戶端儲存一些其它的資料
2、cookie的構成
一般來說，cookie是由瀏覽器儲存的以下幾塊資訊構成的
（1）名稱：一個唯一確定cookie的名稱
（2）值：儲存在cookie中的字串值，值必須被URL編碼
（3）域：cookie對於哪個域是有效的，所有向該域傳送的請求都會包含這個cookie資訊
（4）路徑：對於指定域中的路徑，應該向伺服器傳送cookie
（5）失效時間：表示cookie何時應該被刪除的時間戳
（6）安全標誌：指定後，cookie只有在使用SSL連線的時候才傳送到伺服器
3、如何使用cookie儲存資料
一般來說，有兩種方式可以生成cookie，一種是伺服器傳送http響應時指定Set-Cookie進行指定 ，另一種我們可以使用js生成cookie
由於cookie需要通過URL編碼，因此在寫入cookie時和讀取cookie時我們都需要進行編碼和解碼操作，為了方便，我們可以自己寫一個cookie的操作物件
var CookieUtil = {
get: function(name) {
var cookieName = encodeURIComponent(name) + "=",
cookieStart = document.cookie.indexOf(cookieName),
cookieValue = null;
if(cookieStart > -1) {
var cookieEnd = document.cookie.indexOf(";", cookieStart);
if (cookieEnd == -1) {
cookieEnd = document.cookie.length;
}
cookieValue = decodeURIComponent(document.cookie.substring(cookieStart + cookieName.length, cookieEnd));
}
return cookieValue;
},
set: function(name, value, expires, path, domain, secure) {
var cookieText = encodeURIComponent(name) + "=" + encodeURIComponent(valeu);
if(expires instanceof Data) {
cookieText += ";expires=" + expires.toGMTString();
}
if(path) {
cookieText += ";path=" + path;
}
if(domain) {
cookieText += ";domain=" + domain;
}
if(secure) {
cookieText += ";secure";
}
document.cookie = cookieText;
}
unset: function(name, path, domain, secure) {
this.set(name, "", new Date(0), path, domain, secure);
}
}
當我們想在cookie儲存一些資料，比如儲存使用者是否點選廣告的狀態，可以像下面這樣設定
CookieUtil.set("ifClick", "true");
當我們想判斷使用者是否點選了廣告時，就需要從cookie拿出資料，可以像下面這樣獲取資料
CookieUtil.get("ifClick");
通過從cookie中獲取出我們存入的ifClick資料，我們可以得到相應的值為true，好啦，這個廣告使用者已經點選了，不用顯示小紅點啦
4、cookie的缺點
雖然cookie可以儲存一些資料，但是仍然儲存下面一些缺點
（1）cookie需要在客戶端和伺服器端之間來回傳送，會浪費不必要的資源
（2）cookie的儲存大小有限制，對於每個域，一般只能設定20個cookie，每個cookie大小不能超過4KB
（3）cookie的安全性，cookie因為儲存在客戶端中，其中包含的任何資料都可以被他人訪問，cookie安全性比較低
三、IE使用者資料
雖然H5中可以通過localstorage和sessionstorage進行資料儲存，但是低版本的ie不支援呀，這可怎麼辦？為了在ie中儲存資料，微軟通過一個自定義行為引入了持久化使用者資料的概念
1、什麼是userData
userData是ie的一種資料儲存方式 ，userData 儲存通過將資料寫入一個UserData儲存區（UserData store）來儲存資料，userData將資料以XML格式儲存在客戶端上，UserData儲存方式只適用於IE瀏覽器，UserData儲存區儲存以後，即使IE瀏覽器關閉或者重新整理了，下一次進入該頁面，資料也能夠重新載入而不會丟失，也就是資料將一直存在，除 非你人為刪除或者用指令碼設定了該資料的失效期
一般來說，userData允許每個文件最多儲存128KB資料，每個域名最多1MB資料，是不是會比cookie儲存的資料要大呢？
2、如何使用userData儲存資料
如果我們想使用userData儲存資料，首先必須使用css在某個元素上指定userData行為
<div style="behavior:url(#default#userData)" id="dataStore></div>
一旦該元素使用了userData行為，那麼就可以使用setAttribute()方法在上面儲存資料了，為了將資料提交到瀏覽器快取中，還必須呼叫save()方法並告訴它要儲存到的資料空間的名字，資料空間名字可以完全任意，僅用於區分不同的資料集
var dataStore = document.getElementById("dataStore");
dataStore.setAttribute("ifClick", "true");
dataStore.save("ClickInfo");
在上面的程式碼中，在使用setAttribute儲存了資料之後，呼叫了save方法，指定了資料空間的名稱ClickInfo，下一次頁面載入後，可以使用load方法指定同樣的資料空間來獲取資料
dataStore.load("ClickInfo");
dataStore.getAttribute("ifClick");
在上面的程式碼中，對load()的呼叫獲取了ClickInfo資料空間裡的所有資訊，並且使資料可以通過元素訪問，只有到載入確切完成之後資料才可以使用，好啦，現在我們又成功獲取到了ifClick的值啦，ifClick的值為true，好啦，廣告已經點選，不顯示小紅點
如果getAttribute()呼叫了不存在的名稱或者是尚未載入的名稱，則返回null，我們也可以使用removeAttribute()方法來刪除某個資料
dataStore.removeAttribute("ifClick")；
3、userData的缺點
（1）userData只是針對ie的資料儲存
（2）userData的訪問限制和對cookie的訪問限制一樣，必須來自同一個域名，在同一個路徑下，並使用與進行儲存指令碼同樣的協議才能訪問
（3）userData的資料也是不安全的，不能存放重要的資訊
四、Web儲存機制
接下來，我們要說一下html5中的儲存啦，主要是sessionStorage和localStrorage
1、什麼是Web儲存
Web Storage也是一種在客戶端儲存資料的一種機制，主要的目的是為了克服由cookie帶來的一些限制，當資料需要被嚴格控制在客戶端上時，無須將資料在客戶端和伺服器之間來回的進行傳送 ，並且可以儲存大量的跨會話的資料
一般來說，Web Storage包含了兩種物件的定義，sessionStorage和globalStorage，而現在localStorage在修訂過的html5規範中作為持久儲存客戶端資料的方案取代了globalStorage，接下來，讓我們看一下它們有什麼區別啦
2、sessionStorage
（1）什麼是sessionStorage
sessionStorage物件是儲存特定於某個會話的資料，也就是資料只儲存到瀏覽器關閉，這個物件就像會話cookie，也會在瀏覽器關閉後消失，儲存在sessionStorage中的資料可以跨越頁面重新整理而存在
（2）如何使用sessionStorage儲存資料
由於sessionStorage物件是Storage的一個例項，所以儲存資料時可以使用setItem()或者直接設定新的屬性來儲存資料
//使用方法儲存資料
sessionStorage.setItem("ifClick", "true");
//使用屬性儲存資料
sessionStorage.ifClick = "true";
當我們要獲取某個資料的時候，可以使用getItem來獲取資料
sessionStorage.getItem("ifClick");
我們現在又成功獲取到ifClick的值啦，當然也可以通過length屬性和key()方法來獲取sessionStorage的值
（3）sessionStorage的特點
a、同源策略限制，若想在不同頁面之間對同一個sessionStorage進行操作，這些頁面必須在同一協議、同一主機名和同一埠下
b、單標籤頁限制，sessionStorage操作限制在單個標籤頁中，在此標籤頁進行同源頁面訪問都可以共享sessionStorage資料
c、只在本地儲存，seesionStorage的資料不會跟隨HTTP請求一起傳送到伺服器，只會在本地生效，並在關閉標籤頁後清除資料
d、儲存方式，seesionStorage的儲存方式採用key、value的方式
e、儲存上限限制：不同的瀏覽器儲存的上限也不一樣，但大多數瀏覽器把上限限制在5MB以下
3、globalStorage
（1）什麼是globalStorage
作為最初的Web Storage的一部分，這個物件的目的是跨越會話儲存資料，但有特定的訪問限制，現在globalStorage已經被localStorage取代
（2）如何使用globalStorage儲存資料
要使用globalStorage，首先要指定哪些域可以訪問該資料，可以通過方括號標記使用屬性來實現
globalStorage["aaa.com"].ifClick = "true";
在上面的程式碼中，訪問的是針對域名aaa.com的儲存空間，這個儲存空間對於aaa.com及其所有子域都是可以訪問的，我們可以像下面這樣來獲取資料
globalStorage[aaa.com].getItem("ifClick");
因為globalStorage現在已經比較少使用，如果大家想使用，還是使用localStorage
（3）globalStorage的特點
如果不使用removeItem()或者delete刪除，或者使用者未清除瀏覽器快取，資料將會一直儲存在磁碟上，因此很適合在客戶端儲存文件或者長期儲存使用者偏好設定
4、localStorage
（1）什麼是localStorage
localStorage物件在修訂過的html5規範中作為持久儲存客戶端資料的方案卻帶了globalStorage，與globalStorage不同，不能給localStorage指定任何訪問規則，因為規則已經事先訂好了，要訪問同一個localStorage物件，頁面必須來自同一個域名，使用同一種協議，在同一個埠
（2）如何使用localStorage儲存資料
由於localStorage是Storage的例項，可以像使用sessionStorage一樣來使用它
localStorage.setItem("ifClick","true");
當我們要獲取資料的時候，可以像下面這樣獲取
localStorage.getItem("ifClick");
儲存在localStorage中的資料和儲存在globalStorage中的資料一樣，都遵循相同的規則，資料保留到通過js刪除或者是使用者清除瀏覽器快取
（3）localStorage的特點
a、localStorage會可以將第一次請求的資料直接儲存到本地，這個相當於一個5M大小的針對於前端頁面的資料庫，相比於cookie可以節約頻寬，但是這個卻是隻有在高版本的瀏覽器中才支援的
b、目前所有的瀏覽器中都會把localStorage的值型別限定為string型別，這個在對我們日常比較常見的JSON物件型別需要一些轉換
c、localStorage本質上是對字串的讀取，如果儲存內容多的話會消耗記憶體空間，會導致頁面變卡
最後，要和大家說的是，sessionStorage和localStorage都克服了cookie的一些限制，它們都有很多共同的特點，localStorage與sessionStorage的唯一一點區別就是localStorage屬於永久性儲存 ，而sessionStorage屬於當會話結束的時候，sessionStorage中的鍵值對會被清空
五、IndexedDB
1、為什麼會有IndexedDB
現有的瀏覽器資料儲存方案，都不適合儲存大量資料：Cookie 的大小不超過4KB，且每次請求都會發送回伺服器；LocalStorage 在 2.5MB 到 10MB 之間（各家瀏覽器不同），而且不提供搜尋功能，不能建立自定義的索引，所以，需要一種新的解決方案，這就是 IndexedDB 誕生的背景
2、什麼是IndexedDB
通俗地說，IndexedDB 就是瀏覽器提供的本地資料庫，它可以被網頁尾本建立和操作，IndexedDB 允許儲存大量資料，提供查詢介面，還能建立索引，這些都是 LocalStorage 所不具備的，就資料庫型別而言，IndexedDB 不屬於關係型資料庫（不支援 SQL 查詢語句），更接近 NoSQL 資料庫
3、IndexedDB的特點
a、鍵值對儲存： IndexedDB 內部採用物件倉庫（object store）存放資料，所有型別的資料都可以直接存入，包括 JavaScript 物件，物件倉庫中，資料以"鍵值對"的形式儲存，每一個數據記錄都有對應的主鍵，主鍵是獨一無二的，不能有重複，否則會丟擲一個錯誤
b、非同步： IndexedDB 操作時不會鎖死瀏覽器，使用者依然可以進行其他操作，這與 LocalStorage 形成對比，後者的操作是同步的，非同步設計是為了防止大量資料的讀寫，拖慢網頁的表現
c、支援事務： IndexedDB 支援事務（transaction），這意味著一系列操作步驟之中，只要有一步失敗，整個事務就都取消，資料庫回滾到事務發生之前的狀態，不存在只改寫一部分資料的情況
d、同源限制：IndexedDB 受到同源限制，每一個數據庫對應建立它的域名，網頁只能訪問自身域名下的資料庫，而不能訪問跨域的資料庫
e、儲存空間大： IndexedDB 的儲存空間比 LocalStorage 大得多，一般來說不少於 250MB，甚至沒有上限
f、支援二進位制儲存：IndexedDB 不僅可以儲存字串，還可以儲存二進位制資料（ArrayBuffer 物件和 Blob 物件）
對於IndexedDB的操作會比較複雜，如果大家有興趣可以在網上再自己看一些資料
好啦，今天就介紹到這裡啦，這是目前比較常用的幾種儲存方式，希望大家一起學習呀