HTML5本地儲存之Database Storage應用介紹_html5教學技巧

在上一篇《HTML5本地存儲之Web Storage篇》中，簡單介紹瞭如何利用localStorage實現本地存儲；實際上，除了sessionStorage和localStorage外，HTML5還支援透過本地資料庫進行本地資料存儲，HTML5採用的是"SQLLite"這種文件型資料庫，該資料庫多集中在嵌入式設備上，熟悉IOS/Android開發的同學，應該對SQLLite資料庫比較熟悉。
HTML5中的資料庫操作較簡單，主要有以下兩個函數：
1、透過openDatabase方法建立一個存取資料庫的物件

複製程式碼

程式碼如下:

var db = openDatabase(databasename,version,description,size)

此方法有四個參數，作用分別為：
databasename:資料庫名稱；
version：資料庫版本號，可不填；
description：資料庫描述；
size：給資料庫分配的空間大小;
2、使用第一步建立的資料庫存取物件（如db）執行transaction方法，用來執行事務處理

複製程式碼

程式碼如下:

db.transaction(function(tx)){
//執行存取資料庫的語句
} );

transaction方法使用一個回呼函數作為參數，在這個函數中，執行存取資料庫的特定操作；
3、透過executeSql方法執行查詢

複製程式碼

程式碼如下:

tx.executeSql(sqlQuery,value1,value .],dataHandler,errorHandler)

executeSql方法有四個參數，作用分別如下：
sqlQuery：需要具體執行的sql語句，可以是create、select、update、delete； [value1,value2..]：sql語句中所有使用到的參數的數組，在executeSql方法中，將sql語句中所要使用的參數先用“?”代替，然後依次將這些參數組成數組放在在第二個參數中；
dataHandler：執行成功是調用的回調函數，透過該函數可以獲得查詢結果集；
errorHandler：執行失敗時調用的回調函數；
本文透過HTML5的資料庫支持，重新實現一遍上篇文章中的通訊錄管理，待實現功能如下：
可建立聯絡人並儲存到資料庫中，聯絡人欄位包括：姓名、手機號碼、公司、建立時間；
列所有出目前已儲存的聯絡人資訊；
可刪除特定聯絡人資訊；
同樣，先準備一個HTML頁面，如下：

複製程式碼

程式碼如下:

姓名：



手機：



公司：

介面展現如下：

要實現新聯繫人並存入資料庫功能，需要以下簡單的JS代碼：

複製代碼

代碼如下:

//開啟資料庫
var db = openDatabase('contactdb','','local database demo',204800);
//儲存資料
function save(){
var user_name = document.getElementById("user_name").value;
var mobilephone = document.getElementById("mobilephone").value;
var company = document.getElementBy.("compue"
//建立時間
var time = new Date().getTime();
db.transaction(function(tx){
tx.executeSql('insert into contact values(?,? ,?,?)',[user_name,mobilephone,company,time],onSuccess,onError);
});
}
//sql語句執行成功後執行的回呼函數
function onSuccess(tx,rs){
alert("操作成功");
loadAll();
}
//sql語句執行失敗後執行的回呼函數
function onError(txx ,error){
alert("操作失敗，失敗訊息：" error.message);
}

要展現目前所有已儲存的聯絡人列表，可透過如下JS程式碼實作：

複製程式碼

程式碼如下:

//將所有儲存在sqlLite資料庫中的聯絡人全部取出
function loadAll(){
var list = document.getElementById("list");
db.transaction(function(tx){
//如果資料表不存在，則建立資料表
tx.executeSql('create table if not exists contact(name text,phone text,company text,createtime INTEGER)',[]);
//查詢所有聯絡人記錄
tx.executeSql('select * from contact',[],function(tx,rs){
if(rs.rows.length>0){
var result = " ";
result = "";
for(var i=0;ivar row = rs.rows.item(i );
//轉換時間，並格式化輸出
var time = new Date();
time.setTime(row.createtime);
var timeStr = time.format("yyyy- MM-dd hh:mm:ss");
//拼裝一個表格的行節點
result = "";
}
list.innerHTML = result;
}else{
list.innerHTML = "目前資料為空，趕快開始加入聯絡人吧";
}
});
});
}

其中，涉及格式化時間的format函數，可參考如下JS實作：

複製程式碼

複製程式碼

複製程式碼



複製程式碼



複製程式碼



複製程式碼



複製程式碼

複製程式碼
複製程式碼

程式碼如下:

Date.prototype.format = function(format) { var o = {

"M " : this.getMonth() 1, //month

"d " : this.getDate(), //day

"h " : this.getHours(), //hour
"m " : this.getMinutes(), //minute
"s " : this.getSeconds(), //second
"q " : Math.floor((this.getMonth() 3)/3), //quarter
"S" : this.getMilliseconds () //millisecond
}
if(/(y )/.test(format)) format=format.replace(RegExp.$1,
(this.getFullYear() "").substr( 4 - RegExp.$1.length));
for(var k in o)if(new RegExp("(" k ")").test(format))

format = format.replace(RegExp. $1,
RegExp.$1.length==1 ? o[k] : ("00" o[k]).substr(("" o[k]).length)); return format;
}

最後，介面實作效果如下：  要實作具體某個聯絡人，要執行如下JS程式碼

: 複製程式碼代碼如下: //刪除聯絡人資訊function del(phone){ db.transaction(function(tx){ //注意這裡需要顯示的將傳入的參數phone轉換為字串型別tx.executeSql('delete from contact where phone=?',[String(phone)],onSuccess,onError); }); } 如上截圖的表格樣式，可上截圖參考如下CSS代碼： 複製程式碼代碼如下：

th {
字體：粗體11px "Trebuchet MS"、Verdana、Arial、Helvetica、sans-serif；
顏色：#4f6b72；
右邊框框：1px 實線#C1DAD7;
邊框底部：1px實線#C1DAD7;
邊框頂部：1px 實線#C1DAD7;
字母間距：2px；
文字轉換：大寫寫；文字對齊：左；
內邊距：6px 6px 6px 12px;
}
td {
右邊框：1px 實心#C9DAD7;
邊框底部：1px 實線#C9DAD77； 🎜>背景：#fff;
內邊距：6px 6px 6px 12px;
顏色：#4f6b72;
}

序號	姓名	手機	公司	新增時間 th>	操作
" (i 1) "	" row. name "	" row.phone "	" row.company "	" timeStr "