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>

View Code