今天主要來講下前端的數據存儲，說起數據存儲，大家肯定第一時間想起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的操作會比較復雜，如果大家有興趣可以在網上再自己看一些資料
好啦，今天就介紹到這里啦，這是目前比較常用的幾種存儲方式，希望大家一起學習呀