HTML 5中的存储及离线应用（二）
本小节主要讲述如何使用Web SQL。
- Web SQL使用SQLite存储，目前在Safari、Chrome等浏览器中支持（还是支持的少啊FF/IE均不支持。。。）；
- 可以使用SQL语句完成增删改查操作，应该是我们程序员处理复杂数据时最喜欢的方式了
下面来看例子：
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<!--
webSQL.html by Bill Weinman
<http://bw.org/contact/>
created 2011-04-16
Copyright (c) 2011 The BearHeart Group, LLC
This file may be used for personal educational purposes as needed.
Use for other purposes is granted provided that this notice is
retained and any changes made are clearly indicated as such.
1.0.1 - bw 2011-04-19
-->
<head>
<title>
webSQL storage example
</title>
<link rel="stylesheet" type="text/css" href="../CSS/main.css">
<script language="javascript" src="../Javascript/bwH5LS.js"></script>
<script language="javascript">
var db = prepareDatabase();
// 创建数据表SQL语句
var createSQL = 'CREATE TABLE IF NOT EXISTS tTravel (' +
'id INTEGER PRIMARY KEY,' +
'traveler TEXT,' +
'destination TEXT,' +
'transportation TEXT' +
')';
// Check if this browser supports Web SQL
function getOpenDatabase() {
// 如果可以打开数据库说明浏览器支持，否则不支持
try {
if( !! window.openDatabase ) return window.openDatabase;
else return undefined;
} catch(e) {
return undefined;
}
}
// 正常情况下Chrome的数据库数据文件存放在C:\Users\Sandy\AppData\Local\Google\Chrome\User Data\Default\databases目录，以子目录的方式存放文件
// Open the Web SQL database
function prepareDatabase() {
var odb = getOpenDatabase();
if(!odb) {
dispError('Web SQL Not Supported');
return undefined;
} else {
// 新建/打开测试数据库
var db = odb( 'testDatabase', '1.0', 'A Test Database', 10 * 1024 * 1024 );
db.transaction(function (t) {
// 执行查询语句
t.executeSql(
// 创建表
createSQL,
// 执行select等语句时的参数
[],
// 查询成功后执行语句
function(t, r){
// alert('Create Table, rows effected: ' + r.rowsAffected);
},
// 查询失败后执行语句
function(t, e) {
alert('create table: ' + e.message);
});
});
return db;
}
}
// How many rows do we have?
function countRows() {
if(!db) return;
// 查询并显示所有记录
db.readTransaction(function (t) {
t.executeSql('SELECT COUNT(*) AS c FROM tTravel', [], function (t, r) {
var c = r.rows.item(0).c;
element('rowCount').innerHTML = c ? c : 0;
}, function(t, e) {
alert('countRows: ' + e.message);
});
});
}
// Create the Edit and Delete buttons for a row
function rowButtons( id, traveler ) {
return '<form><input type="button" value="Edit" onClick="javascript:editGo(' + id + ')"/>' +
'<input type="button" value="Delete" onClick="javascript:deleteGo(' + id + ', "' + traveler + '")"/></form>';
}
// Main display function
function dispResults() {
if(errorMessage) {
element('results').innerHTML = errorMessage;
return;
}
countRows(); // update the row count each time the display is refreshed
if(db) {
db.readTransaction(function(t) { // readTransaction sets the database to read-only
t.executeSql('SELECT * FROM tTravel ORDER BY LOWER(traveler)', [], function(t, r) {
var bwt = new bwTable();
bwt.setHeader(['Traveler', 'Destination', 'Transportation', '']);
for( var i = 0; i < r.rows.length; i++ ) {
var row = r.rows.item(i);
bwt.addRow([row.traveler, row.destination, row.transportation, rowButtons(row.id, row.traveler)]);
}
element('results').innerHTML = bwt.getTableHTML();
element('travelForm').elements['traveler'].focus();
});
});
}
}
// add or update rows in the table
function dbGo() {
if(errorMessage) return;
var f = element('travelForm');
var action = f.elements['inputAction'].value;
var traveler = f.elements['traveler'].value;
var destination = f.elements['destination'].value;
var transportation = f.elements['transportation'].value;
var key = f.elements['key'].value;
switch(action) {
case 'add':
if(! (traveler || destination || transportation)) break;
db.transaction( function(t) {
t.executeSql(' INSERT INTO tTravel ( traveler, destination, transportation ) VALUES ( ?, ?, ? ) ',
[ traveler, destination, transportation ]
);
}, function(t, e){ alert('Insert row: ' + e.message); }, function() {
resetTravelForm();
});
break;
case 'update':
if(! (traveler || destination || transportation)) break;
db.transaction( function(t) {
t.executeSql(' UPDATE tTravel SET traveler = ?, destination = ?, transportation = ? WHERE id = ?',
[ traveler, destination, transportation, key ]
);
}, function(t, e){ alert('Update row: ' + e.message); }, function() {
resetTravelForm();
});
break;
}
dispResults();
}
// update the edited row
function editGo(id) {
db.readTransaction(function(t) {
t.executeSql('SELECT * FROM tTravel WHERE id = ?', [id], function(t, r) {
var row = r.rows.item(0);
if(row) {
var f = element('travelForm');
f.elements['traveler'].value = row.traveler;
f.elements['destination'].value = row.destination;
f.elements['transportation'].value = row.transportation;
f.elements['goButton'].value = 'Update';
f.elements['inputAction'].value = 'update';
f.elements['key'].value = row.id;
f.elements['traveler'].focus();
f.elements['traveler'].select();
}
});
});
}
// confirm and delete a row
function deleteGo(id, traveler) {
if(confirm('Delete ' + traveler + ' (ID: ' + id + ')?')) {
db.transaction(function(t) {
t.executeSql('DELETE FROM tTravel WHERE id = ?', [id]);
});
resetTravelForm();
dispResults();
}
}
// clear all the form fields and reset the button and action elements
function resetTravelForm() {
var f = element('travelForm');
for( var n in [ 'traveler', 'destination', 'transportation', 'key' ] ) {
f.elements[n].value = '';
}
f.elements['inputAction'].value = 'add';
f.elements['goButton'].value = 'Add';
}
// delete all the rows in the table
function clearDB() {
if(confirm('Clear the entire table?')) {
db.transaction(function(t) {
t.executeSql('DELETE FROM tTravel');
});
dispResults();
}
}
function initDisp() {
dispResults();
}
window.onload = function() {
initDisp();
}
</script>
</head>
<body>
<div id="content">
<h1>
webSQL storage example
</h1>
<div id="form">
<form id="travelForm">
<table class="form">
<tr><td class="label"> Traveler </td><td> <input type="text" name="traveler" /> </td></tr>
<tr><td class="label"> Destination </td><td> <input type="text" name="destination" /> </td></tr>
<tr><td class="label"> Transportation </td><td> <input type="text" name="transportation" /> </td></tr>
<tr><td colspan="2" class="button">
<input id="formSubmit" type="button" name="goButton" value="Add" onClick="javascript:dbGo()" />
</td></tr>
</table>
<input id="inputAction" type="hidden" name="action" value="add" />
<input id="inputKey" type="hidden" name="key" value="0" />
</form>
</div>
<p id="rcp" class="message">
There are <span id="rowCount">_</span> rows in the table.
<input type="button" value="Empty" onClick="javascript:clearDB()" />
</p>
<div id="results">
<!-- results show here -->
</div>
</div>
</body>
</html>