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

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

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

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

//開啟資料庫
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);
}

//將所有儲存在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實作：

複製程式碼

複製程式碼
複製程式碼

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

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