本篇文章主要講解HTML5的本地存儲，使用到的技術是indexedDB。
對於本地存儲這個概念想必大家都已經有所了解了，就是把一些數據存儲到瀏覽器中，當與網絡斷開時，可以從瀏覽器中讀取數據，用來做一些離線應用。
IndexedDB的技術特點是，不需要你去寫特定的sql語句來對數據進行操作，它是nosql的，數據形式使用的是json。
下面講解一個例子，以這個例子來說明一些關鍵的代碼。
這個簡單的例子是能增加一個人的信息，並且能刪除之。先附上一個效果圖：
添加刪除信息時配合firebug信息的效果：
示例還是蠻簡單的，下面我們來分析一下使用indexedDB的一般步驟，這里只着重講解一些回調函數和對象，剩下的工作還需要讀者自行分析，最后會給出完整的源代碼示例。
我們首先需要根據不同瀏覽器的內核，創建indexedDB對象，如下：
var indexedDB = window.indexedDB || window.webkitIndexedDB || window.mozIndexedDB || window.msIndexedDB;
之后，我們需要打開一個數據庫，我這里起名叫做persons：
openRequest = indexedDB.open("persons");
這里還需要說明一下，open方法是異步方法，我們在這里需要處理它的回調函數即可。例如：
openRequest.onsuccess = function(e)
{
……
}
openRequest.onerror = function (event)
{
……
}
openRequest.onupgradeneeded = function(e)
{
……
}
我們可以看到，我們需要對成功和錯誤的回調函數進行處理。onupgradeneeded這個回調函數又是做什么的呢？當數據庫發生改變時，我們需要處理這個回調函數。比如說，當某個數據庫不存在需要創建，或者數據庫更改時。我們一般需要在該回調函數內創建objectStore，它就相當於數據庫中的某個表一樣。
當我們需要對表中的數據進行遍歷時，我們可能需要用到下述代碼：
var transaction = db.transaction(["person"],"readwrite");
var objectStore = transaction.objectStore("person");
objectStore.openCursor().onsuccess = function(event)
{
var cursor = event.target.result;
if (cursor)
{
……
}
}
objectStore.openCursor().onerror = function(event)
{
……
}
凡是對數據的讀寫操作，一般都會用到transacation，它也是異步的。例如，當我們需要讀取數據時，有個游標對象，我們操作它就可以很方便的讀取數據了。
其他的一些接口就不在這里一一介紹了，感興趣的朋友可以查看以下網址：
https://developer.mozilla.org/en/IndexedDB/Using_IndexedDB
這個是mozilla官方提供的API。
下面還要說重要的一點，就是運行環境。
1.頁面必須依托於服務器才能正常顯示，單獨打開頁面是無法正常顯示的，請把頁面發布到服務器中，如IIS、Tomcat、或者調試環境自帶的輕量級服務器等。
2.筆者在firefox14及以上版本運行代碼無誤；IE9及更早版本並不支持，據說IE10正式版支持，但是這點筆者並沒有實際測試過；opera(當前版本12)目前尚不支持；chrome(當前版本24)支持indexedDB部分功能，但是本例中代碼並不能正常運行，據說因為不支持onupgradeneeded這個回調函數，也許chrome有自己的實現策略，這就需要讀者自己查找資料了。
下面給出源代碼：
請注明本文原始鏈接：http://www.cnblogs.com/Johnny_Z/archive/2012/11/04/2753331.html