伴隨著WEB的發(fā)展，瀏覽器的存儲(chǔ)方式及技術(shù)不斷的發(fā)生更改，從剛開(kāi)始的cookie，到localstorage，sessionStorage，再到IndexedDB，再到現(xiàn)在的Web SQL，作為一名合格的前端開(kāi)發(fā)，當(dāng)然需要對(duì)這些技術(shù)了如指掌并熟練掌握，本文將比較全面的介紹常見(jiàn)的瀏覽器存儲(chǔ)以及其使用。
Cookie是一個(gè)用戶通過(guò)瀏覽器瀏覽網(wǎng)站產(chǎn)出的信息的票根，Cookies通常被用來(lái)標(biāo)示一個(gè)網(wǎng)站用戶的瀏覽經(jīng)歷，它可能包含這個(gè)用戶的個(gè)人偏好或訪問(wèn)這個(gè)網(wǎng)站的一些輸入信息。用戶可以自己隨意操作他們?yōu)g覽器中的Cookie。 Cookies 可以通過(guò)服務(wù)端使用 Set-Cookie Http header來(lái)設(shè)置和修改，當(dāng)然也可以使用javascript的document.cookie去操作。
瀏覽器兼容性
詳細(xì)請(qǐng)參考
在瀏覽器中操作如下：
//讀取網(wǎng)站下所有的cookie信息，獲取的結(jié)果是一個(gè)以分號(hào)；作為分割的一個(gè)字符串
//例如：在百度首頁(yè)，獲取的如下
//往原來(lái)的已經(jīng)存在的cookie中加入新的
//當(dāng)然也可以在后面加上可選擇的選項(xiàng)鍵值對(duì)，例如domain，以及其他path，
//刪除cookie，就是讓這個(gè)cookie值得expires過(guò)，就是設(shè)置這個(gè)expires為
需要注意的地方：
1. 通過(guò)上面的代碼，可以看到document.cookie是個(gè)可訪問(wèn)的屬性，但是它有內(nèi)置的setter和getter的function，而不是一個(gè)簡(jiǎn)單的字符串?dāng)?shù)據(jù)，你的get和set都會(huì)調(diào)用這些原生內(nèi)置的函數(shù)。
2. cookie支持跨域，可以通過(guò)在根域名設(shè)置cookie，共享多個(gè)子域名的數(shù)據(jù)。
Cookie的Chrome瀏覽器實(shí)現(xiàn)
cookie解析
Web Storage有兩種機(jī)制，分別為sessionStorage和localStorage。 sessionStorage用于本地存儲(chǔ)一個(gè)會(huì)話（session）中的數(shù)據(jù)，這些數(shù)據(jù)只有在同一個(gè)會(huì)話中的頁(yè)面才能訪問(wèn)并且當(dāng)會(huì)話結(jié)束后數(shù)據(jù)也隨之銷毀。因此sessionStorage是一種半持久化的本地存儲(chǔ)（會(huì)話級(jí)別的存儲(chǔ)），而localStorage用于持久化的本地存儲(chǔ)，除非主動(dòng)刪除數(shù)據(jù)，否則數(shù)據(jù)是永遠(yuǎn)不會(huì)過(guò)期的。
這兩個(gè)對(duì)象，對(duì)外的方法主要有： setItem，getItem，以鍵值對(duì)的形式存儲(chǔ)和讀取，key按照索引獲取當(dāng)前存儲(chǔ)的key值，找不到時(shí)返回null，length屬性代表當(dāng)前存儲(chǔ)的key，value對(duì)數(shù)
瀏覽器兼容性
詳細(xì)請(qǐng)參考
代碼示例（以localStorage為例
var randomArr = [Math.random（），Math.random（），Math.random（），
//storage username，key值區(qū)分大小寫(xiě)，存入的內(nèi)容為這個(gè)變量調(diào)用toString方法的結(jié)果
localStorage.setItem（“username”，
//獲取
//刪除
//存儲(chǔ)對(duì)象時(shí)，可以先調(diào)用JSON.stringify方法，然后取出的時(shí)候再調(diào)用JSON.parse方法獲取結(jié)果
localStorage.setItem（“randomarr”，
IndexedDB 是一個(gè)為了能夠在客戶端存儲(chǔ)可觀數(shù)量的結(jié)構(gòu)化數(shù)據(jù)，并且在這些數(shù)據(jù)上使用索引進(jìn)行高性能檢索的 API。
IndexedDB 分別為同步和異步訪問(wèn)提供了單獨(dú)的 API ，異步 API 方法調(diào)用完后會(huì)立即返回，而不會(huì)阻塞調(diào)用線程。
要異步訪問(wèn)數(shù)據(jù)庫(kù)，要調(diào)用 window 對(duì)象 indexedDB 屬性的 open（） 方法。該方法返回一個(gè) IDBRequest 對(duì)象 （IDBOpenDBRequest）；異步操作通過(guò)在 IDBRequest 對(duì)象上觸發(fā)事件來(lái)和調(diào)用程序進(jìn)行通信。
IndexDb是NoSQL數(shù)據(jù)庫(kù)，是一種支持事務(wù)的瀏覽器數(shù)據(jù)庫(kù)，基本操作就是，打開(kāi)數(shù)據(jù)庫(kù)，增刪改查各種。
瀏覽器兼容性
詳細(xì)請(qǐng)參考
代碼示例 - 1.打開(kāi)數(shù)據(jù)庫(kù)
//處理瀏覽器兼容性
//如果該數(shù)據(jù)庫(kù)MyDatabase不存在，則會(huì)被創(chuàng)建；如果已經(jīng)存在，則被打開(kāi)。
//打開(kāi)數(shù)據(jù)庫(kù)失敗的回調(diào)
//代開(kāi)數(shù)據(jù)成功的回調(diào)
代碼示例 - 2.初始化數(shù)據(jù)庫(kù)
var dbVersion = 2;//整數(shù)
// open函數(shù)接受的第二個(gè)參數(shù)，代表數(shù)據(jù)的版本，當(dāng)打開(kāi)的版本號(hào)比當(dāng)前的版本號(hào)大時(shí)，會(huì)觸發(fā)onupgradeneeded這個(gè)回調(diào)
var request = window.indexedDB.open（dbName，
id:“001”，name:“xiaoming”，
}，
id:“002”，name:“xiaoxiang”，
//錯(cuò)誤處理
//創(chuàng)建表，以id字段作為主鍵來(lái)確保唯一，使用keyPath表示
var objectStore = db.createObjectStore（tableName，
//給表添加索引
objectStore.createIndex（“name”，“name”，{unique:false}）；//非unique索引
objectStore.createIndex（“email”，“email”，{unique:true}）；//email字段作為unique索引
//插入數(shù)據(jù)
代碼示例 - 3.使用事務(wù)添加、刪除數(shù)據(jù)
transaction（） 方法接受兩個(gè)參數(shù)并返回一個(gè)事務(wù)對(duì)象。第一個(gè)參數(shù)是事務(wù)希望跨越的對(duì)象存儲(chǔ)空間的列表，即數(shù)據(jù)庫(kù)中的表名稱。如果你希望事務(wù)能夠跨越所有的對(duì)象存儲(chǔ)空間你可以傳入一個(gè)空數(shù)組。第二個(gè)參數(shù)如果你沒(méi)有為第二個(gè)參數(shù)指定任何內(nèi)容，默認(rèn)只讀。
插入學(xué)生003，004，
id:“003”，name:“xiaofang1”，
}，
id:“004”，name:“xiaofang2”，
}，
id:“005”，name:“xiaofang3”，
//打開(kāi)數(shù)據(jù)庫(kù)失敗的回調(diào)
//代開(kāi)數(shù)據(jù)成功的回調(diào)
var transaction = db.transaction（[tableName]，
//事務(wù)主要有三個(gè)回調(diào)，error，abort，
//處理錯(cuò)誤
//事務(wù)中斷處理
console.log（“添加數(shù)據(jù)成功
刪除001學(xué)生
transaction= db.transaction（[tableName]，
//處理錯(cuò)誤
//事務(wù)中斷處理
console.log（”刪除學(xué)生001成功
代碼示例 - 4.使用索引查找數(shù)據(jù)
主要調(diào)用IDBObjectStore示例對(duì)象的index方法
//根據(jù)索引字段email朝找3@qq.com的學(xué)生
indexDb還有游標(biāo)查找功能，限于篇幅，就不展開(kāi)介紹了
Web SQL Database API實(shí)際上未包含在HTML 5規(guī)范之中，它是一個(gè)獨(dú)立的規(guī)范，它引入了一套使用SQL操作客戶端數(shù)據(jù)庫(kù)的API，這些API有同步的，也有異步的，一般情況下，都會(huì)使用異步API。它的核心方法有三個(gè)：openDatabase，transaction和executeSql。這些API已經(jīng)被廣泛的實(shí)現(xiàn)在了不同的瀏覽器里，尤其是手機(jī)端瀏覽器。雖然W3C官方在2011年11月聲明已經(jīng)不再維護(hù)Web SQL Database規(guī)范，但由于其廣泛的實(shí)現(xiàn)程度，了解這些API對(duì) Web開(kāi)發(fā)還是非常有必要的。
瀏覽器兼容性
詳情請(qǐng)參考
代碼示例
dbName :“MyDataBase”，//數(shù)據(jù)庫(kù)名稱
dbVersion:“0.1”，//版本
dbDisplayName:“測(cè)試數(shù)據(jù)庫(kù)”，//顯示名稱
dbEstimatedSize:10*1024*1024 //數(shù)據(jù)庫(kù)大小，單位字節(jié)
db = window.openDatabase（info.dbName，info.dbVersion，info.dbDisplayName，
//初始化students表
//執(zhí)行Sql，如果students表不存在，則創(chuàng)建改表
trans.executeSql（“create table if not exists students（id unique，name text null，email text null）”，[]，
}，
//插入數(shù)據(jù)
trans.executeSql（“insert into students（name，email） values（？，？）”，['xiaoming‘，'1@qq.com']，
}，
trans.executeSql（“insert into students（name，email） values（？，？）”，['xiaohong’，‘2@qq.com']，
}，
//刪除數(shù)據(jù)
trans.executeSql（“delete from students where name = ? ”，['xiaohong']， function （trans，
}， function （trans，
//出國(guó)看病www.auromcs.cn查詢數(shù)據(jù)
trans.executeSql（“select * from students”，[]， function （trans，
console.log（“總共查詢到 ”+result.rows.length+“ 條數(shù)據(jù)
}， function （trans，
5. 其他
Application Cache翻譯成中文為應(yīng)用程序緩存，是html5中為實(shí)現(xiàn)離線瀏覽所提供的API。結(jié)合Manifest文件使用，使用編程方式，更新瀏覽器緩存內(nèi)容。主要調(diào)用update與swapCache去更新瀏覽緩存，目前該技術(shù)已經(jīng)被最新的規(guī)范所廢棄，轉(zhuǎn)而使用了Service Workers。
一個(gè) service worker 是一段運(yùn)行在瀏覽器后臺(tái)進(jìn)程里的腳本，它獨(dú)立于當(dāng)前頁(yè)面，提供了一些不需要與web頁(yè)面交互的功能，即那種在網(wǎng)頁(yè)背后悄悄執(zhí)行的能力。在將來(lái)，基于它可以實(shí)現(xiàn)消息推送，靜默更新等服務(wù)，但是目前它首先要具備的功能是攔截和處理網(wǎng)絡(luò)請(qǐng)求，包括可編程的響應(yīng)緩存管理。
小結(jié)
目前Cookie的兼容性最好，使用的最廣泛，但有被濫用的趨勢(shì)。Web Storage 兼容比較好，除了老板的IE 6，7不支持外，其他主流瀏覽器都已經(jīng)支持了，使用起來(lái)也方便簡(jiǎn)單，適合存儲(chǔ)鍵值對(duì)數(shù)據(jù)。WebSql由于未在HTML5規(guī)范中，前景堪憂，適當(dāng)了解下。IndexDb目前來(lái)看，兼容性不太好，但是前景很好，目前由w3c在推廣，相信在以后應(yīng)該有個(gè)大爆發(fā)（個(gè)人看法）。 Application Cache目前已經(jīng)被廢棄，Service Workers目前屬于起步階段，感覺(jué)離實(shí)用還需要時(shí)間。
