HTML5 提供了四種在客戶端存儲數據的新方法，即 localStorage 、sessionStorage、globalStorage、Web Sql Database。
一，localStorage ：
localStorage 沒有時間限制的數據存儲，第二天、第二週或下一年之後，數據依然可用。也就是說，localStorage是永遠不會過期的，除非主動刪除數據。數據可跨越多個窗口，無視當前會話，被共同訪問、使用。有點像AspNet 應用程序中的全局變量Application。
二，sessionStorage ：
顧名思義它就如同AspNet中的Session。 針對一個 session 的數據存儲，任何一個頁面存儲的信息在窗口中同一網站的任何頁面都可以訪問它存儲的數據。每個窗口的值都是獨立的，它的數據會因窗口的關閉而丟失，不同窗口間的sessionStorage是不可以共享的。
localStorage /sessionStorage都有相同的Api 如
localStorage.length 獲得storage中的個數
localStorage .key(n) 獲得storage中第n個鍵值對的鍵
localStorage.key = value
localStorage.setItem(key, value) 添加
localStorage.getItem(key)獲取
localStorage.removeItem(key) 移除
localStorage.clear() 清除
從上面的Api可以看出，他們其實就是鍵/值對，就是字典，就是JSON。既然可以看作是json ，那麼對他們的操作就可以有如下方式:
如：localStorage.name="liuzongyi" ;//添加
localStorage["name"]="liuzongyi" ; //添加
alert(localStorage.name);//獲取
alert(localStorage["name"]);//獲取
三，globalStorage：
在瀏覽器關閉以後，使用globalStorage存儲的信息仍能夠保留下來，和sessionStorage一樣，域中任何一個頁面存儲的信息都能被所有的頁面共享。目前只有FF支持，且只支持當前域下的globalStorage存儲。
基本用法：
globalStorage['developer.mozilla.org'] —— 在developer.mozilla.org下面所有的子域都可以通過這個存儲對象來進行讀和寫。
globalStorage['mozilla.org'] —— 在mozilla.org域名下面的所有網頁都可以通過這個存儲對象來進行讀和寫。
globalStorage['org'] —— 在.org域名下面的所有網頁都可以通過這個存儲對象來進行讀和寫。
globalStorage[''] —— 在任何域名下的任何網頁都可以通過這個存儲對象來進行讀和寫。
方法屬性：
setItem(key, value) —— 設置或重置 key 值。
getItem(key) —— 獲取 key 值。
removeItem(key) —— 刪除 key 值。
設置 key 值：window.globalStorage["planabc.net"].key = value;
獲取 key 值：value = window.globalStorage["planabc.net"].key;
四，Web Sql DataBase
這節介紹Html5 本地存儲中的一個很重要的概念——Web Sql Database ，正因爲本人覺得這個很重要，所有獨立出來重點介紹。即時你完全沒聽說過這個概念，望文生義也應該知道它大概是個什麼東西。
對於簡單的數據，使用sessionStorage和localStorage能夠很好地完成存取，但是對於處理複雜的關係型數據，它就力不從心了。這也是 HTML 5 的“Web SQL Database”API 接口的應用所在。
下面我將一一將介紹怎樣 創建打開數據庫，創建表，添加數據，更新數據，刪除數據，刪除表 。
先介紹三個核心方法
1、openDatabase：這個方法使用現有數據庫或創建新數據庫創建數據庫對象。
2、transaction：這個方法允許我們根據情況控制事務提交或回滾。
3、executeSql：這個方法用於執行真實的SQL查詢。
第一步：打開連接並創建數據庫
if (!dataBase) {
alert("數據庫創建失敗！");
} else {
alert("數據庫創建成功！");
}
解釋一下openDatabase方法打開一個已經存在的數據庫，如果數據庫不存在，它還可以創建數據庫。幾個參數意義分別是：
第二步：創建數據表
dataBase.transaction( function(tx) {
tx.executeSql(
"create table if not exists stu (id REAL UNIQUE, name TEXT)",
[],
function(tx,result){ alert('創建stu表成功'); },
function(tx, error){ alert('創建stu表失敗:' + error.message);
});
});
}
第三步：執行增刪改查
1）添加數據：
dataBase.transaction(function (tx) {
tx.executeSql(
"insert into stu (id, name) values(?, ?)",
[id, '徐明祥'],
function () { alert('添加數據成功'); },
function (tx, error) { alert('添加數據失敗: ' + error.message);
} );
});
2）查詢數據
dataBase.transaction(function (tx) {
tx.executeSql(
"select * from stu", [],
function (tx, result) { //執行成功的回調函數
//在這裏對result 做你想要做的事情吧...........
},
function (tx, error) {
alert('查詢失敗: ' + error.message);
} );
});
}
result：查詢出來的數據集。其數據類型爲 SQLResultSet ，就如同C#中的DataTable。
dataBase.transaction(function (tx) {
tx.executeSql(
"update stu set name = ? where id= ?",
[name, id],
function (tx, result) {
},
function (tx, error) {
alert('更新失敗: ' + error.message);
});
});
}
4）刪除數據
dataBase.transaction(function (tx) {
tx.executeSql(
"delete from stu where id= ?",
[id],
function (tx, result) {
},
function (tx, error) {
alert('刪除失敗: ' + error.message);
});
});
}
5）刪除數據表
dataBase.transaction(function (tx) {
tx.executeSql('drop table stu');
});
}
瞭解更多：http://www.w3.org/TR/webdatabase/