第 1 个 Web SQL Database 应用
使用 window 对象的 openDatabase() 方法，可以在网页内创建和使用 Web SQL Database ，示例代码如下：
function queryResult(tx, result) {
try {
var rowList = result.rows;
for (var i = 0; i < rowList.length; i++) {
var row = rowList.item(i);
for (var j in row) {
console.log(j + '= ' + row[j] + '; ');
}
}
} catch (err) {
alert(err.message ? err.message : err.toString());
}
}
function queryError(tx, err) {
alert(err.message ? err.message : err.toString());
}
function callback(tx) {
var sql;
sql =
'CREATE TABLE employees(firstName TEXT, lastName TEXT, EmpType TEXT, age INTEGER)';
tx.executeSql(sql);
sql =
"INSERT INTO employees(firstName, lastName, EmpType, age) VALUES(' myFirst ', ' myLast ',' myEmpType ', 40)";
tx.executeSql(sql);
sql =
'INSERT INTO employees(firstName, lastName, EmpType, age) VALUES( ? , ? , ? , ? )';
tx.executeSql(sql, ['myFirst', 'myLast', 'myEmpType', 40]);
sql = 'select _ FROM employees ';
tx.executeSql(sql, [], queryResult, queryError);
}
try {
var db = window.openDatabase(
'mydb',
'1.0',
' 我的第一个客户端数据库 ',
2 * 1024 * 1024,
);
} catch (err) {
alert(err.message ? err.message : err.toString());
}
if (!db) alert('不能连接到数据库！ ');
db.transaction(callback);
单次
<head>
<script>
var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);
var msg;
db.transaction(function (tx) {
tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');
t;
x.executeSql('INSERT INTO LOGS (id, log) VALUES (1, "foobar")');
tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "logmsg")');
msg = '<p> 完成消息创建和插入行操作。 </p>';
document.querySelector('#status').innerHTML = msg;
});
db.transaction(function (tx) {
tx.executeSql(
'select \* FROM LOGS',
[],
function (tx, results) {
var len = results.rows.length,
i;
msg = '<p> 查询行数 : ' + len + '</p>';
document.querySelector('#status').innerHTML += msg;
for (i = 0; i < len; i++) {
msg = '<p><b>' + results.rows.item(i).log + '</b></p>';
document.querySelector('#status').innerHTML += msg;
}
},
null,
);
});
</script>
<meta charset="utf-8" />
</head>
<body>
<div id="status" name="status"></div>
</body>
批量
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<table id="racers" border="1" cellspacing="0" style="width:100%">
<th>Id</th>
<th>Name</th>
</table>
<script>
// 根据名称 name 打开数据库
var db = openDatabase('db', '1.0', 'my first database', 2 * 1024 * 1024);
function log(id, name) {
var row = document.createElement('tr');
var idCell = document.createElement('td');
var nameCell = document.createElement('td');
idCell.textContent = id;
nameCell.textContent = name;
row.appendChild(idCell);
row.appendChild(nameCell);
document.getElementById('racers').appendChild(row);
}
function doQuery() {
db.transaction(function (tx) {
tx.executeSql('select * from mytable', [], function (tx, result) {
// 显示查询的记录集
for (var i = 0; i < result.rows.length; i++) {
var item = result.rows.item(i);
log(item.id, item.name);
}
});
});
}
function initDatabase() {
var names = [
' 张三 ',
'李四 ',
' 王五 ',
' 赵六 ',
' 侯七 ',
'abc',
'def',
];
db.transaction(function (tx) {
tx.executeSql(
'CREATE TABLE IF NOT EXISTS mytable(id integer primary key autoincrement, name)',
);
for (var i = 0; i < names.length; i++) {
tx.executeSql('INSERT INTO mytable (name) VALUES (?)', [names[i]]);
}
doQuery();
});
}
initDatabase();
</script>
</body>