HTML5中本地数据库（SQLLite）的基础
在html5中，可以像訪問本地文件那樣輕松的對(duì)內(nèi)置數(shù)據(jù)庫(kù)進(jìn)行直接訪問。
html5中內(nèi)置了兩種數(shù)據(jù)庫(kù)，一種為SQLLite,另一種為indexedDB。
在js中使用SQLLite數(shù)據(jù)庫(kù)的步驟：
1.創(chuàng)建訪問數(shù)據(jù)庫(kù)的對(duì)象
var db = openDatabase("myDB","1.0","test db",1024*100);說明：
1. 該方法返回的是創(chuàng)建的數(shù)據(jù)庫(kù)的對(duì)象，如果該數(shù)據(jù)庫(kù)不存在才會(huì)創(chuàng)建這個(gè)數(shù)據(jù)庫(kù)。
2. 第一個(gè)參數(shù)：數(shù)據(jù)庫(kù)的名稱
第二個(gè)參數(shù)：數(shù)據(jù)庫(kù)的版本號(hào)
第三個(gè)參數(shù)：數(shù)據(jù)庫(kù)的描述
第四個(gè)參數(shù)：數(shù)據(jù)庫(kù)的大小
2.使用事務(wù)處理
db.transaction(function(tx){tx.executeSql("");})說明：
1.使用事務(wù)處理的原因：可以防止對(duì)數(shù)據(jù)庫(kù)進(jìn)行訪問、執(zhí)行有關(guān)操作時(shí)受到外界的干擾。在web上可能同時(shí)有很多人對(duì)網(wǎng)頁(yè)進(jìn)行訪問，如果在訪問數(shù)據(jù)庫(kù)的過程中，正在操作的數(shù)據(jù)庫(kù)被其他用戶修改了，會(huì)引起很多意想不到的結(jié)果，因此使用事務(wù)來達(dá)到操作完成之前阻止其他用戶對(duì)數(shù)據(jù)庫(kù)的訪問。
2.function(tx)：是一個(gè)回調(diào)函數(shù)
3.tx.executeSql()：該方法是用來執(zhí)行sql語句的。
transaction.executeSql(sqlquery,[],dataHandler,errorHandler)
第一個(gè)參數(shù)：是數(shù)據(jù)庫(kù)操作的sql語句
第二個(gè)參數(shù)：sql語句中所使用的參數(shù)的數(shù)組
第三個(gè)參數(shù)：成功執(zhí)行sql語句后調(diào)用的回調(diào)函數(shù)，
function dataHandler(transaction,results)
第四個(gè)參數(shù)：執(zhí)行sql語句時(shí)，如果出錯(cuò)調(diào)用的回調(diào)函數(shù)，
function errorHandler(transaction,errmsg)
案例：網(wǎng)絡(luò)留言板
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>姓名：</td><td><input type="text" id="name"></td></tr><tr><td>留言：</td><td><input type="text" id="memo"></td></tr><tr><td><input type="button" value="保存" onclick="saveData()"></td><td><input type="button" value="刪除某個(gè)表" onclick="dropTable()"></td></tr></table> <hr> <table border="1" id="datatable"></table><p id="msg"></p> </body> </html>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下的所有的子節(jié)點(diǎn) 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 = "時(shí)間";tr.appendChild(th1);tr.appendChild(th2);tr.appendChild(th3);datatable.appendChild(tr); }//顯示數(shù)據(jù)信息內(nèi)容 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); }//顯示當(dāng)前本地?cái)?shù)據(jù)庫(kù)中所有的數(shù)據(jù)信息 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));}});}) }//向本地?cái)?shù)據(jù)庫(kù)中添加數(shù)據(jù) 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中提交的數(shù)據(jù) function saveData(){var name = document.getElementById("name").value;var memo = document.getElementById("memo").value;var time = new Date().getTime();addData(name,memo,time);showAllData(); }//刪除某一個(gè)表 function dropTable(){var tableName = window.prompt("請(qǐng)輸入要?jiǎng)h除的表名稱：","");db.transaction(function(tx){tx.executeSql("drop table "+tableName+"",[],function(tx,rs){window.alert("表刪除成功！");},function(tx,error){window.alert(error.source+"::"+error.message);});}) }效果演示：
開發(fā)者這工具中的數(shù)據(jù)庫(kù)表中的數(shù)據(jù)信息：
總結(jié)
以上是生活随笔為你收集整理的HTML5中本地数据库（SQLLite）的基础的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： XML解析的三种方式（dom,sax,d
- 下一篇： 2017年html5行业报告,云适配发布