一、為什么要進行數(shù)據(jù)存儲
隨著Web應(yīng)用程序的出現(xiàn)，慢慢的也開始產(chǎn)生了對于能夠直接在客戶端上存儲用戶信息能力的要求，我們知道當我們訪問某個頁面的時候，很多東西都需要從服務(wù)器端進行加載，如果這個時候能將一些東西存儲在客戶端的話，是不是就可以直接拿來用啦，方便快捷，速度又快，又可以節(jié)省了很多不必要的請求，為什么不用呢？
其實在我實習(xí)的時候，曾經(jīng)做過一個功能，當某條廣告更新的時候右上角出現(xiàn)小紅點，用戶點擊過后就不出現(xiàn)小紅點，直到廣告更新的時候小紅點再出現(xiàn)，這個功能當時我就用到了客戶端數(shù)據(jù)存儲來實現(xiàn)啦，其實像一些登錄信息，偏好設(shè)定都可以存儲在客戶端，而首先進行客戶端存儲的方案就是cookie，而今天，cookie只是在客戶端存儲數(shù)據(jù)的其中一種方式，接下來，我們將介紹各種客戶端的數(shù)據(jù)存儲方式
二、cookie
1、cookie的作用
說到cookie，其實cookie有兩個主要功能，第一個功能就是用于解決http無狀態(tài)的缺點，在客戶端存儲會話信息，記錄用戶的狀態(tài)，而第二個功能也就是我們現(xiàn)在也經(jīng)常使用cookie在客戶端存儲一些其它的數(shù)據(jù)
2、cookie的構(gòu)成
一般來說，cookie是由瀏覽器保存的以下幾塊信息構(gòu)成的
（1）名稱：一個唯一確定cookie的名稱
（2）值：存儲在cookie中的字符串值，值必須被URL編碼
（3）域：cookie對于哪個域是有效的，所有向該域發(fā)送的請求都會包含這個cookie信息
（4）路徑：對于指定域中的路徑，應(yīng)該向服務(wù)器發(fā)送cookie
（5）失效時間：表示cookie何時應(yīng)該被刪除的時間戳
（6）安全標志：指定后，cookie只有在使用SSL連接的時候才發(fā)送到服務(wù)器
3、如何使用cookie存儲數(shù)據(jù)
一般來說，有兩種方式可以生成cookie，一種是服務(wù)器發(fā)送http響應(yīng)時指定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存儲一些數(shù)據(jù)，比如存儲用戶是否點擊廣告的狀態(tài)，可以像下面這樣設(shè)置
CookieUtil.set("ifClick", "true");
當我們想判斷用戶是否點擊了廣告時，就需要從cookie拿出數(shù)據(jù)，可以像下面這樣獲取數(shù)據(jù)
CookieUtil.get("ifClick");
通過從cookie中獲取出我們存入的ifClick數(shù)據(jù)，我們可以得到相應(yīng)的值為true，好啦，這個廣告用戶已經(jīng)點擊了，不用顯示小紅點啦
4、cookie的缺點
雖然cookie可以存儲一些數(shù)據(jù)，但是仍然存儲下面一些缺點
（1）cookie需要在客戶端和服務(wù)器端之間來回傳送，會浪費不必要的資源
（2）cookie的存儲大小有限制，對于每個域，一般只能設(shè)置20個cookie，每個cookie大小不能超過4KB
（3）cookie的安全性，cookie因為保存在客戶端中，其中包含的任何數(shù)據(jù)都可以被他人訪問，cookie安全性比較低
三、IE用戶數(shù)據(jù)
雖然H5中可以通過localstorage和sessionstorage進行數(shù)據(jù)存儲，但是低版本的ie不支持呀，這可怎么辦？為了在ie中存儲數(shù)據(jù)，微軟通過一個自定義行為引入了持久化用戶數(shù)據(jù)的概念
1、什么是userData
userData是ie的一種數(shù)據(jù)存儲方式，userData 存儲通過將數(shù)據(jù)寫入一個UserData存儲區(qū)（UserData store）來保存數(shù)據(jù)，userData將數(shù)據(jù)以XML格式保存在客戶端上，UserData存儲方式只適用于IE瀏覽器，UserData存儲區(qū)保存以后，即使IE瀏覽器關(guān)閉或者刷新了，下一次進入該頁面，數(shù)據(jù)也能夠重新載入而不會丟失，也就是數(shù)據(jù)將一直存在，除 非你人為刪除或者用腳本設(shè)置了該數(shù)據(jù)的失效期
一般來說，userData允許每個文檔最多保存128KB數(shù)據(jù)，每個域名最多1MB數(shù)據(jù)，是不是會比cookie存儲的數(shù)據(jù)要大呢？
2、如何使用userData存儲數(shù)據(jù)
如果我們想使用userData存儲數(shù)據(jù)，首先必須使用css在某個元素上指定userData行為
<div style="behavior:url(#default#userData)" id="dataStore></div>
一旦該元素使用了userData行為，那么就可以使用setAttribute()方法在上面保存數(shù)據(jù)了，為了將數(shù)據(jù)提交到瀏覽器緩存中，還必須調(diào)用save()方法并告訴它要保存到的數(shù)據(jù)空間的名字，數(shù)據(jù)空間名字可以完全任意，僅用于區(qū)分不同的數(shù)據(jù)集
var dataStore = document.getElementById("dataStore");
dataStore.setAttribute("ifClick", "true");
dataStore.save("ClickInfo");
在上面的代碼中，在使用setAttribute存儲了數(shù)據(jù)之后，調(diào)用了save方法，指定了數(shù)據(jù)空間的名稱ClickInfo，下一次頁面載入后，可以使用load方法指定同樣的數(shù)據(jù)空間來獲取數(shù)據(jù)
dataStore.load("ClickInfo");
dataStore.getAttribute("ifClick");
在上面的代碼中，對load()的調(diào)用獲取了ClickInfo數(shù)據(jù)空間里的所有信息，并且使數(shù)據(jù)可以通過元素訪問，只有到載入確切完成之后數(shù)據(jù)才可以使用，好啦，現(xiàn)在我們又成功獲取到了ifClick的值啦，ifClick的值為true，好啦，廣告已經(jīng)點擊，不顯示小紅點
如果getAttribute()調(diào)用了不存在的名稱或者是尚未載入的名稱，則返回null，我們也可以使用removeAttribute()方法來刪除某個數(shù)據(jù)
dataStore.removeAttribute("ifClick")；
3、userData的缺點
（1）userData只是針對ie的數(shù)據(jù)存儲
（2）userData的訪問限制和對cookie的訪問限制一樣，必須來自同一個域名，在同一個路徑下，并使用與進行存儲腳本同樣的協(xié)議才能訪問
（3）userData的數(shù)據(jù)也是不安全的，不能存放重要的信息
四、Web存儲機制
接下來，我們要說一下html5中的存儲啦，主要是sessionStorage和localStrorage
1、什么是Web存儲
Web Storage也是一種在客戶端存儲數(shù)據(jù)的一種機制，主要的目的是為了克服由cookie帶來的一些限制，當數(shù)據(jù)需要被嚴格控制在客戶端上時，無須將數(shù)據(jù)在客戶端和服務(wù)器之間來回的進行傳送，并且可以存儲大量的跨會話的數(shù)據(jù)
一般來說，Web Storage包含了兩種對象的定義，sessionStorage和globalStorage，而現(xiàn)在localStorage在修訂過的html5規(guī)范中作為持久保存客戶端數(shù)據(jù)的方案取代了globalStorage，接下來，讓我們看一下它們有什么區(qū)別啦
2、sessionStorage
（1）什么是sessionStorage
sessionStorage對象是存儲特定于某個會話的數(shù)據(jù)，也就是數(shù)據(jù)只保存到瀏覽器關(guān)閉，這個對象就像會話cookie，也會在瀏覽器關(guān)閉后消失，存儲在sessionStorage中的數(shù)據(jù)可以跨越頁面刷新而存在
（2）如何使用sessionStorage存儲數(shù)據(jù)
由于sessionStorage對象是Storage的一個實例，所以存儲數(shù)據(jù)時可以使用setItem()或者直接設(shè)置新的屬性來存儲數(shù)據(jù)
// 使用方法存儲數(shù)據(jù)
sessionStorage.setItem("ifClick", "true"); // 使用屬性存儲數(shù)據(jù)
sessionStorage.ifClick = "true";
當我們要獲取某個數(shù)據(jù)的時候，可以使用getItem來獲取數(shù)據(jù)
sessionStorage.getItem("ifClick");
我們現(xiàn)在又成功獲取到ifClick的值啦，當然也可以通過length屬性和key()方法來獲取sessionStorage的值
（3）sessionStorage的特點
a、同源策略限制，若想在不同頁面之間對同一個sessionStorage進行操作，這些頁面必須在同一協(xié)議、同一主機名和同一端口下
b、單標簽頁限制，sessionStorage操作限制在單個標簽頁中，在此標簽頁進行同源頁面訪問都可以共享sessionStorage數(shù)據(jù)
c、只在本地存儲，seesionStorage的數(shù)據(jù)不會跟隨HTTP請求一起發(fā)送到服務(wù)器，只會在本地生效，并在關(guān)閉標簽頁后清除數(shù)據(jù)
d、存儲方式，seesionStorage的存儲方式采用key、value的方式
e、存儲上限限制：不同的瀏覽器存儲的上限也不一樣，但大多數(shù)瀏覽器把上限限制在5MB以下
3、globalStorage
（1）什么是globalStorage
作為最初的Web Storage的一部分，這個對象的目的是跨越會話存儲數(shù)據(jù)，但有特定的訪問限制，現(xiàn)在globalStorage已經(jīng)被localStorage取代
（2）如何使用globalStorage存儲數(shù)據(jù)
要使用globalStorage，首先要指定哪些域可以訪問該數(shù)據(jù)，可以通過方括號標記使用屬性來實現(xiàn)
globalStorage["aaa.com"].ifClick = "true";
在上面的代碼中，訪問的是針對域名aaa.com的存儲空間，這個存儲空間對于aaa.com及其所有子域都是可以訪問的，我們可以像下面這樣來獲取數(shù)據(jù)
globalStorage[aaa.com].getItem("ifClick");</pre>
因為globalStorage現(xiàn)在已經(jīng)比較少使用，如果大家想使用，還是使用localStorage
（3）globalStorage的特點
如果不使用removeItem()或者delete刪除，或者用戶未清除瀏覽器緩存，數(shù)據(jù)將會一直保存在磁盤上，因此很適合在客戶端存儲文檔或者長期保存用戶偏好設(shè)置
4、localStorage
（1）什么是localStorage
localStorage對象在修訂過的html5規(guī)范中作為持久保存客戶端數(shù)據(jù)的方案卻帶了globalStorage，與globalStorage不同，不能給localStorage指定任何訪問規(guī)則，因為規(guī)則已經(jīng)事先訂好了，要訪問同一個localStorage對象，頁面必須來自同一個域名，使用同一種協(xié)議，在同一個端口
（2）如何使用localStorage存儲數(shù)據(jù)
由于localStorage是Storage的實例，可以像使用sessionStorage一樣來使用它
localStorage.setItem("ifClick","true");
當我們要獲取數(shù)據(jù)的時候，可以像下面這樣獲取
localStorage.getItem("ifClick");
存儲在localStorage中的數(shù)據(jù)和存儲在globalStorage中的數(shù)據(jù)一樣，都遵循相同的規(guī)則，數(shù)據(jù)保留到通過js刪除或者是用戶清除瀏覽器緩存
（3）localStorage的特點
a、localStorage會可以將第一次請求的數(shù)據(jù)直接存儲到本地，這個相當于一個5M大小的針對于前端頁面的數(shù)據(jù)庫，相比于cookie可以節(jié)約帶寬，但是這個卻是只有在高版本的瀏覽器中才支持的
b、目前所有的瀏覽器中都會把localStorage的值類型限定為string類型，這個在對我們?nèi)粘１容^常見的JSON對象類型需要一些轉(zhuǎn)換
c、localStorage本質(zhì)上是對字符串的讀取，如果存儲內(nèi)容多的話會消耗內(nèi)存空間，會導(dǎo)致頁面變卡
最后，要和大家說的是，sessionStorage和localStorage都克服了cookie的一些限制，它們都有很多共同的特點，localStorage與sessionStorage的唯一一點區(qū)別就是localStorage屬于永久性存儲，而sessionStorage屬于當會話結(jié)束的時候，sessionStorage中的鍵值對會被清空
五、IndexedDB
1、為什么會有IndexedDB
現(xiàn)有的瀏覽器數(shù)據(jù)儲存方案，都不適合儲存大量數(shù)據(jù)：Cookie 的大小不超過4KB，且每次請求都會發(fā)送回服務(wù)器；LocalStorage 在 2.5MB 到 10MB 之間（各家瀏覽器不同），而且不提供搜索功能，不能建立自定義的索引，所以，需要一種新的解決方案，這就是 IndexedDB 誕生的背景
2、什么是IndexedDB
通俗地說，IndexedDB 就是瀏覽器提供的本地數(shù)據(jù)庫，它可以被網(wǎng)頁腳本創(chuàng)建和操作，IndexedDB 允許儲存大量數(shù)據(jù)，提供查找接口，還能建立索引，這些都是 LocalStorage 所不具備的，就數(shù)據(jù)庫類型而言，IndexedDB 不屬于關(guān)系型數(shù)據(jù)庫（不支持 SQL 查詢語句），更接近 NoSQL 數(shù)據(jù)庫
3、IndexedDB的特點
a、鍵值對儲存： IndexedDB 內(nèi)部采用對象倉庫（object store）存放數(shù)據(jù)，所有類型的數(shù)據(jù)都可以直接存入，包括 JavaScript 對象，對象倉庫中，數(shù)據(jù)以"鍵值對"的形式保存，每一個數(shù)據(jù)記錄都有對應(yīng)的主鍵，主鍵是獨一無二的，不能有重復(fù)，否則會拋出一個錯誤
b、異步： IndexedDB 操作時不會鎖死瀏覽器，用戶依然可以進行其他操作，這與 LocalStorage 形成對比，后者的操作是同步的，異步設(shè)計是為了防止大量數(shù)據(jù)的讀寫，拖慢網(wǎng)頁的表現(xiàn)
c、支持事務(wù)： IndexedDB 支持事務(wù)（transaction），這意味著一系列操作步驟之中，只要有一步失敗，整個事務(wù)就都取消，數(shù)據(jù)庫回滾到事務(wù)發(fā)生之前的狀態(tài)，不存在只改寫一部分數(shù)據(jù)的情況
d、同源限制：IndexedDB 受到同源限制，每一個數(shù)據(jù)庫對應(yīng)創(chuàng)建它的域名，網(wǎng)頁只能訪問自身域名下的數(shù)據(jù)庫，而不能訪問跨域的數(shù)據(jù)庫
e、儲存空間大： IndexedDB 的儲存空間比 LocalStorage 大得多，一般來說不少于 250MB，甚至沒有上限
f、支持二進制儲存：IndexedDB 不僅可以儲存字符串，還可以儲存二進制數(shù)據(jù)（ArrayBuffer 對象和 Blob 對象）
對于IndexedDB的操作會比較復(fù)雜，如果大家有興趣可以在網(wǎng)上再自己看一些資料
