HTML5中本地資料庫（SQLLite）的基礎
阿新 • • 發佈：2019-01-21
在html5中，可以像訪問本地檔案那樣輕鬆的對內建資料庫進行直接訪問。
html5中內建了兩種資料庫，一種為SQLLite,另一種為indexedDB。
在js中使用SQLLite資料庫的步驟：
1.建立訪問資料庫的物件
var db = openDatabase("myDB","1.0","test db",1024*100);說明：
1. 該方法返回的是建立的資料庫的物件，如果該資料庫不存在才會建立這個資料庫。
2. 第一個引數：資料庫的名稱
第二個引數：資料庫的版本號
第三個引數：資料庫的描述
第四個引數：資料庫的大小
2.使用事務處理
db.transaction(function 說明：
1.使用事務處理的原因：可以防止對資料庫進行訪問、執行有關操作時受到外界的干擾。在web上可能同時有很多人對網頁進行訪問，如果在訪問資料庫的過程中，正在操作的資料庫被其他使用者修改了，會引起很多意想不到的結果，因此使用事務來達到操作完成之前阻止其他使用者對資料庫的訪問。
2.function(tx)：是一個回撥函式
3.tx.executeSql()：該方法是用來執行sql語句的。
transaction.executeSql(sqlquery,[],dataHandler,errorHandler)
第一個引數：是資料庫操作的sql語句
第二個引數：sql語句中所使用的引數的陣列
第三個引數：成功執行sql語句後呼叫的回撥函式，
function dataHandler(transaction,results)
第四個引數：執行sql語句時，如果出錯呼叫的回撥函式，
function errorHandler(transaction,errmsg)
案例：網路留言板
html程式碼：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="html5TestJS.js"></script>
</head>
<body onload="init()">
<table>
<tr>
<td> js檔案：
/**
* Created by Administrator on 2016/5/6 0006.
*/
var datatable = null;
var db = openDatabase("MyData","","My Database",1024*100);
function init(){
datatable = document.getElementById("datatable");
showAllData();
}
//刪除html中table下的所有的子節點
function removeAllData(){
for(var i=datatable.childNodes.length-1;i>=0;i--){
datatable.removeChild(datatable.childNodes[i]);
}
var tr = document.createElement("tr");
var th1 = document.createElement("th");
var th2 = document.createElement("th");
var th3 = document.createElement("th");
th1.innerHTML = "姓名";
th2.innerHTML = "留言";
th3.innerHTML = "時間";
tr.appendChild(th1);
tr.appendChild(th2);
tr.appendChild(th3);
datatable.appendChild(tr);
}
//顯示資料資訊內容
function showData(row){
var tr = document.createElement("tr");
var td1 = document.createElement("td");
var td2 = document.createElement("td");
var td3 = document.createElement("td");
td1.innerHTML = row.name;
td2.innerHTML = row.message;
var t = new Date();
t.setTime(row.time);
td3.innerHTML = t.toLocaleDateString()+" "+ t.toLocaleTimeString();
tr.appendChild(td1);
tr.appendChild(td2);
tr.appendChild(td3);
datatable.appendChild(tr);
}
//顯示當前本地資料庫中所有的資料資訊
function showAllData(){
db.transaction(function(tx){
tx.executeSql("create table if not exists MsgData(name text,message text,time integer)",[]);
tx.executeSql("select * from MsgData",[],function(tx,rs){
removeAllData();
for(var i=0;i<rs.rows.length;i++){
showData(rs.rows.item(i));
}
});
})
}
//向本地資料庫中新增資料
function addData(name,message,time){
db.transaction(function(tx){
tx.executeSql("insert into MsgData values (?,?,?)",[name,message,time],function(tx,rs){
window.alert("插入成功！");
},function(tx,error){
window.alert(error.source+"::"+error.message);
});
})
}
//儲存table中提交的資料
function saveData(){
var name = document.getElementById("name").value;
var memo = document.getElementById("memo").value;
var time = new Date().getTime();
addData(name,memo,time);
showAllData();
}
//刪除某一個表
function dropTable(){
var tableName = window.prompt("請輸入要刪除的表名稱：","");
db.transaction(function(tx){
tx.executeSql("drop table "+tableName+"",[],function(tx,rs){
window.alert("表刪除成功！");
},function(tx,error){
window.alert(error.source+"::"+error.message);
});
})
}效果演示：
開發者這工具中的資料庫表中的資料資訊：
