html5本地存储（二）--- SQLList
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 <!DOCTYPE html> 2 <head> 3 <meta charset="UTF-8"> 4 <title>使用数据库实现Web留言本</title> 5 <script type="text/javascript"> 6 //打开数据库 7 var datatable = null; 8 var db = openDatabase('MyData', '', 'My Database', 102400); 9 10 //初始化 11 function init() { 12 datatable = document.getElementById("datatable"); 13 showAllData(); 14 } 15 //擦除表格中当前显示的数据 16 function removeAllData() { 17 for(var i = datatable.childNodes.length - 1; i >= 0; i--) { 18 datatable.removeChild(datatable.childNodes[i]); 19 } 20 var c = ""; 21 c += "<tr>"; 22 c += "<td>姓名</td>"; 23 c += "<td>留言</td>"; 24 c += "<td>留言时间</td>"; 25 c += "</tr>"; 26 datatable.innerHTML = c; 27 28 } 29 //显示数据 30 function showData(row) { 31 var tr = document.createElement('tr'); 32 var t = new Date(); 33 t.setTime(row.time); 34 35 var c = ""; 36 c += "<td>"+ row.name +"</td>"; 37 c += "<td>"+ row.message +"</td>"; 38 c += "<td>"+ t.toLocaleDateString() + " " + t.toLocaleTimeString(); +"</td>"; 39 40 tr.innerHTML = c 41 42 datatable.appendChild(tr); 43 } 44 //显示全部数据 45 function showAllData() { 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 function addData(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 function saveData() { 72 var name = document.getElementById('name').value; 73 var memo = document.getElementById('memo').value; 74 var time = new Date().getTime(); 75 addData(name, memo, time); 76 showAllData(); 77 } 78 </script> 79 </head> 80 81 <body onload="init();"> 82 <h1>使用数据库实现Web留言本</h1> 83 <table> 84 <tr> 85 <td>姓名:</td> 86 <td><input type="text" id="name"></td> 87 </tr> 88 <tr> 89 <td>留言:</td> 90 <td><input type="text" id="memo"></td> 91 </tr> 92 <tr> 93 <td></td> 94 <td><input type="button" value="保存" onclick="saveData();"></td> 95 </tr> 96 </table> 97 <hr> 98 <table id="datatable" border="1"></table> 99 <p id="msg"></p> 100 </body> 101 102 </html>
