sql 存储html,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

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;27

28 }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(); +"";39

40 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