為什么使用瀏覽器端數據庫：隨着瀏覽器的處理能力不斷增強，越來越多的網站開始考慮，將大量數據儲存在客戶端，這樣可以減少用戶等待從服務器獲取數據的時間。
一、localStorage — 本地存儲 可以長期存儲數據，沒有時間限制。
可以存儲 ：數組、json數據、圖片、腳本、樣式文件
function test(){
if(window.localStorage){//判斷瀏覽器是否支持 localStorage
var ls=window.localStorage;
ls.setItem("name","張三");//設置值
var name= ls.getItem("name");//取值
ls.removeItem("name");//刪除數據
}else{
alert('瀏覽器不支持 localStorage');
}
}
存在的局限性: 子域名之間不能共享存儲數據；超出存儲范圍后可以使用 LRU、FIFO 技術處理；
二、sessionStorage生命周期為當前窗口或標簽頁，一旦窗口或標簽頁被永久關閉了，那么所有通過sessionStorage存儲的數據也就被清空了。
三、IndexedDB
1、使用IndexedDB的原因
現有的瀏覽器端數據儲存方案，都不適合儲存大量數據：cookie不超過4KB，且每次請求都會發送回服務器端；Window.name屬性缺乏安全性，
且沒有統一的標准；localStorage在2.5MB到10MB之間（各家瀏覽器不同）。所以，需要一種新的 解 決方案，這就是IndexedDB誕生的背景。
2、什么是IndexedDB
通俗地說，IndexedDB就是瀏覽器端數據庫，可以被網頁腳本程序創建和操作。它允許儲存大量數據，提供查找接口，還能建立索引。
這些都是localStorage所不具備的。就數據庫類型而言，IndexedDB不屬於關系型數據庫（不支持SQL查詢語 句），更接近NoSQL數據庫。
3、IndexedDB的特點。
（1） 鍵值對儲存。 IndexedDB內部采用對象倉庫（object store）存放數據。所有類型的數據都可以直接存入，包括JavaScript對象。在對象倉庫中，
數據以“鍵值對”的形式保存，每一個數據都有對應的鍵名，鍵名是獨一無二的，不能有重復，否則會拋出一個錯誤。
（2）異步。 IndexedDB操作時不會鎖死瀏覽器，用戶依然可以進行其他操作，這與localStorage形成對比，后者的操作是同步的。異步設計是為了防止大量數據的讀寫，拖慢網頁的表現。
（3）支持事務。 IndexedDB支持事務（transaction），這意味着一系列操作步驟之中，只要有一步失敗，整個事務就都取消，數據庫回到事務發生之前的狀態，不存在只改寫一部分數據的情況。
（4）同域限制 IndexedDB也受到同域限制，每一個數據庫對應創建該數據庫的域名。來自不同域名的網頁，只能訪問自身域名下的數據庫，而不能訪問其他域名下的數據庫。
（5）儲存空間大 IndexedDB的儲存空間比localStorage大得多，一般來說不少於250MB。IE的儲存上限是250MB，Chrome和Opera是剩余空間的某個百分比，Firefox則沒有上限。
（6）支持二進制儲存。 IndexedDB不僅可以儲存字符串，還可以儲存二進制數據。
目前，Chrome 27+、Firefox 21+、Opera 15+和IE 10+支持這個API，但是Safari完全不支持。
4、使用
a. 判斷瀏覽器是否支持Indexed DB
View Code
b.創建/打開數據庫
View Code
c.關閉數據庫
View Code
d. 對數據的操作
事務 在對新數據庫做任何事情之前，需要開始一個事務。事務中需要指定該事務跨越哪些object store。
事務具有三種模式
只讀：read，不能修改數據庫數據，可以並發執行
讀寫：readwrite，可以進行讀寫操作
版本變更：verionchange
d1.添加數據
View Code
d2. 通過鍵獲取數據
View Code
d3.讀取集合
View Code
d4. 更新數據
View Code
d5.刪除數據
View Code
d6.清空數據
View Code