html5内置了2种本地数据库,一是被称为“SQLLite”,可以通过SQL语言来访问文件型SQL数据库。二是被称为“indexedDB” 的NoSQL类型的数据库
这篇主要讲SQLLite
在js中使用SQLLite数据库,分两个步骤
一、创建访问数据库
使用openDatabase方法创建
var db = openDatabase(‘mybd‘,1.0,"testDB",2*1024*1024)
该方法创建一个访问数据库对象,该方法有4个参数
第一个参数:数据库名
第二个参数:版本号
第三个参数:数据库描述
第四个参数:数据库大小
二、使用事务处理
使用transaction方法执行事务处理, 该方法使用一个回调函数作为参数
db.transaction(function(tx) {
tx.executeSql(‘INSERT INTO MsgData VALUES(?, ?, ?)‘, [name, message, time],
function(tx, rs) {
alert("成功保存数据!");
},
function(tx, error) {
alert(error.source + "::" + error.message);
});
});
executeSql方法有4个参数
第一个参数:需要执行的SQL语句
第二个参数:SQL语句中所有使用到的参数数组。在这个方法中,sql语句的参数用“?”代替,然后将参数组成数组放到第二个参数中
第三个参数:执行sql语句成功调用的回调函数
第四个语句:执行sql语句失败调用的回调函数
查看示例:使用SQLLite实现web留言本
1
2
3
4
使用数据库实现Web留言本5
6 //打开数据库
7 var datatable = null;8 var db = openDatabase(‘MyData‘, ‘‘, ‘My Database‘, 102400);9
10 //初始化
11 functioninit() {12 datatable = document.getElementById("datatable");13 showAllData();14 }15 //擦除表格中当前显示的数据
16 functionremoveAllData() {17 for(var i = datatable.childNodes.length - 1; i >= 0; i--) {18 datatable.removeChild(datatable.childNodes[i]);19 }20 var c = "";21 c += "
";22 c += "姓名";23 c += "留言";24 c += "留言时间";25 c += "";26 datatable.innerHTML =c;2728 }29 //显示数据
30 functionshowData(row) {31 var tr = document.createElement(‘tr‘);32 var t = newDate();33 t.setTime(row.time);34
35 var c = "";36 c += "
"+ row.name +"";37 c += ""+ row.message +"";38 c += ""+ t.toLocaleDateString() + " " + t.toLocaleTimeString(); +"";3940 tr.innerHTML =c41
42 datatable.appendChild(tr);43 }44 //显示全部数据
45 functionshowAllData() {46 //执行事务处理
47 db.transaction(function(tx) {48 //用回调函数来访问数据库
49 tx.executeSql(‘CREATE TABLE IF NOT EXISTS MsgData(name TEXT, message TEXT, time INTEGER)‘, []);50 tx.executeSql(‘SELECT * FROM MsgData‘, [], function(tx, rs) {51 removeAllData();52 for(var i = 0; i < rs.rows.length; i++) {53 showData(rs.rows.item(i));54 }55 });56 });57 }58 //添加数据
59 functionaddData(name, message, time) {60
61 db.transaction(function(tx) {62 tx.executeSql(‘INSERT INTO MsgData VALUES(?, ?, ?)‘, [name, message, time], function(tx, rs) {63 alert("成功保存数据!");64 },65 function(tx, error) {66 alert(error.source + "::" +error.message);67 });68 });69 }70 //保存数据
71 functionsaveData() {72 var name = document.getElementById(‘name‘).value;73 var memo = document.getElementById(‘memo‘).value;74 var time = newDate().getTime();75 addData(name, memo, time);76 showAllData();77 }78
79
80
81
82
使用数据库实现Web留言本
83
84
85
姓名:86
87
88
89
留言:90
91
92
93
94
95
96
97
98
99
100
101
102