HTML5 的Web SQL Databases-本地数据库中文教程
[P][FACE=宋体][SIZE=9pt][FACE=宋体][SIZE=9pt]针对本地数据储存，W3C提及到四种不同的方法，每一种方法都很精彩，但是今天要提及的只是其中一种：Web SQL Databases。[/FACE][/SIZE][/FACE][/SIZE][/P][P][FACE=宋体][SIZE=9pt][FACE=宋体][SIZE=9pt]HTML5的Web SQL Databases的很诱惑人，当你发现可以用与mysql查询一样的查询语句来操作本地数据库时，你会发现这东西挺有趣的，遗憾找不到中文教程，我这里只好特意翻译一篇文章（原文):[/FACE][/SIZE][/FACE][/SIZE][/P][P][FACE=宋体][SIZE=9pt][FACE=宋体][SIZE=9pt]————————–翻译启动——–[/FACE][/SIZE][/FACE][/SIZE][/P][P][FACE=宋体][SIZE=9pt][FACE=宋体][SIZE=9pt]从Safari 4,iPhone/iPad OS3,Chome 5以及Opera 10.5(桌面版)开始，HTML5 Local Database就开始被支持。我从这里了解到HTML5 Local Database，并且已经研究了一段时间，因此我决定做几个简单的例子来告诉你该怎么去使用它。[/FACE][/SIZE][/FACE][/SIZE][/P][FACE=宋体][SIZE=9pt][SIZE=9pt]建立数据库[/FACE][/SIZE][/SIZE][P][FACE=宋体][SIZE=9pt][FACE=宋体][SIZE=9pt][/FACE][/SIZE][/FACE][/SIZE][/P][P][FACE=宋体][SIZE=9pt][FACE=宋体][SIZE=12px]
[/FACE][/SIZE][/FACE][/SIZE][/P][P][FACE=宋体][SIZE=9pt][FACE=宋体][SIZE=12px]
[/FACE][/SIZE][/FACE][/SIZE][/P][P][FACE=宋体][SIZE=9pt][FACE=宋体][SIZE=12px] [/FACE][/SIZE][CODE]
function initDatabase() {
try {
if (!window.openDatabase) {
alert('Databases are not supported in this browser.');
} else {
var shortName = 'DEMODB';
var version = '1.0';
var displayName = 'DEMO Database';
var maxSize = 100000; // bytes
DEMODB = openDatabase(shortName, version, displayName, maxSize);
createTables();
selectAll();
}
} catch(e) {
if (e == 2) {
// Version number mismatch.
console.log("Invalid database version.");
} else {
console.log("Unknown error "+e+".");
}
return;
}
}
[/CODE][/FACE][/SIZE][/P][P][FACE=宋体][SIZE=9pt][FACE=宋体][SIZE=9pt]
[/FACE][/SIZE][/FACE][/SIZE][/P][P][FACE=宋体][SIZE=9pt][FACE=宋体][SIZE=9pt][SIZE=9pt]
[/FACE][/SIZE][/FACE][/SIZE][/SIZE][/P][P][FACE=宋体][SIZE=9pt][FACE=宋体][SIZE=9pt][SIZE=9pt] [/FACE][/SIZE][/FACE][/SIZE][/SIZE][/P][P][FACE=宋体][SIZE=9pt][FACE=宋体][SIZE=9pt][SIZE=9pt]
[/FACE][/SIZE][/FACE][/SIZE][/SIZE][/P][P][FACE=宋体][SIZE=9pt][FACE=宋体][SIZE=9pt][/FACE][/SIZE][/FACE][/SIZE][/P][P][FACE=宋体][SIZE=9pt][FACE=宋体][SIZE=9pt]首先我们得先检测一下浏览器是否支持openDatabase这个方法，假如支持我们才能定义里头的参数：[/FACE][/SIZE][/FACE][/SIZE][/P][ul][FACE=宋体][SIZE=9pt][FACE=宋体][SIZE=9pt] [li]shortName 数据库名，浏览器和SQL语句中会用到[/li] [li]version openDatabase 的版本. 这里用的是1.0 ([URL=http://developer.apple.com/safari/library/documentation/iPhone/Conceptual/SafariJSDatabaseGuide/UsingtheJavascriptDatabase/UsingtheJavascriptDatabase.html#//apple_ref/doc/uid/TP40007256-CH3-XSW1]点击[/URL]了解更多)[/li] [li]displayName 数据库显示的全名/描述[/li] [li]maxSize 数据库期望的上限体积大小。需要内存管理时，这个参数是必要的。[/li][/FACE][/SIZE][/FACE][/SIZE][/ul][P][FACE=宋体][SIZE=9pt][FACE=宋体][SIZE=9pt]然后，调用createTables()，用于进行数据表的定义，以及对数据表预填充一些初始化数据（可选）。[/FACE][/SIZE][/FACE][/SIZE][/P][FACE=宋体][SIZE=9pt][SIZE=9pt]建立数据表[/FACE][/SIZE][/SIZE][P][FACE=宋体][SIZE=9pt][FACE=宋体][SIZE=12px]
[/FACE][/SIZE][/FACE][/SIZE][/P][P][FACE=宋体][SIZE=9pt][FACE=宋体][/FACE][/SIZE][/FACE][/P][P][FACE=宋体][SIZE=9pt][FACE=宋体][SIZE=12px]
[/FACE][/SIZE][/FACE][/SIZE][/P][P][FACE=宋体][SIZE=9pt][FACE=宋体][SIZE=12px]
[/FACE][/SIZE][/FACE][/SIZE][/P][P][FACE=宋体][SIZE=9pt][FACE=宋体][SIZE=12px] [/FACE][CODE]function createTables(){ DEMODB.transaction( function (transaction) { transaction.executeSql('CREATE TABLE IF NOT EXISTS page_settings(id INTEGER NOT NULL PRIMARY KEY, fname TEXT NOT NULL,bgcolor TEXT NOT NULL, font TEXT, favcar TEXT);', [], nullDataHandler, errorHandler); } ); prePopulate(); } [/CODE][/SIZE][/FACE][/SIZE][/P][P][FACE=宋体][SIZE=9pt][FACE=宋体][FACE=宋体][SIZE=9pt][/FACE][/SIZE][/FACE][/FACE][/SIZE][/P][P][FACE=宋体][SIZE=9pt][FACE=宋体][FACE=宋体][SIZE=9pt][/FACE][/SIZE][/FACE][/FACE][/SIZE][/P][P][FACE=宋体][SIZE=9pt][FACE=宋体][FACE=宋体][SIZE=9pt]这个简单的方法用executeSql函数执行了如’CREATE TABLE’的sql语句。这里的sql语法是基于SQLLite的，对于大部分web/手机开发者来说应该不陌生。在这个实例中，我们创建了page_settings数据表并且先预填充一些初始化数据。[/FACE][/SIZE][/FACE][/FACE][/SIZE][/P][P][FACE=宋体][SIZE=9pt][FACE=宋体][FACE=宋体][SIZE=9pt][/FACE][/SIZE][/FACE][/FACE][/SIZE][/P][P][FACE=宋体][SIZE=9pt][FACE=宋体][FACE=宋体][SIZE=9pt]
[/FACE][/SIZE][/FACE][/FACE][/SIZE][/P][P][FACE=宋体][SIZE=9pt][FACE=宋体][SIZE=12px]
[/FACE][/SIZE][/FACE][/SIZE][/P][P][FACE=宋体][SIZE=9pt][FACE=宋体][SIZE=12px]
[/FACE][/SIZE][/FACE][/SIZE][/P][P][FACE=宋体][SIZE=9pt][FACE=宋体][SIZE=12px] [/FACE][/SIZE][CODE]
function prePopulate(){
DEMODB.transaction(
function (transaction) {
//Optional Starter Data when page is initialized
var data = ['1','none','#B3B4EF','Helvetica','Porsche 911 GT3'];
transaction.executeSql("INSERT INTO page_settings(id, fname, bgcolor, font, favcar) VALUES (?, ?, ?, ?, ?)", [data[0], data[1], data[2], data[3], data[4]]);
}
);
}
[/CODE][/FACE][/SIZE][/P][P][FACE=宋体][SIZE=9pt][FACE=宋体][SIZE=9pt][/FACE][/SIZE][/FACE][/SIZE][/P][P][FACE=宋体][SIZE=9pt][FACE=宋体][SIZE=9pt][/FACE][/SIZE][/FACE][/SIZE][/P][P][FACE=宋体][SIZE=9pt][FACE=宋体][SIZE=9pt]Note: although we don’t really need a PK for such a basic demo it will be there for future extensions and advancements.（这一句不知道不知道他在说啥>_<）[/FACE][/SIZE][/FACE][/SIZE][/P][P][FACE=宋体][SIZE=9pt][FACE=宋体][SIZE=9pt]现在数据库已经被初始化，建立了一个数据表并且里面有一行默认数据。因为数据是被保存到本地，所以尽管你刷新或者关闭页面数据都还是在的。想直观点在Safari中看到这些数据，打开‘开发-错误控制台-储存’，你就能看到这个数据库以及增加或者改变的内容。[/FACE][/SIZE][/FACE][/SIZE][/P][P][FACE=宋体][SIZE=9pt][FACE=宋体][SIZE=9pt][upload=15159,0]21152240_1.jpg[/upload][/FACE][/SIZE][/FACE][/SIZE][/P][FACE=宋体][SIZE=9pt][SIZE=9pt]选择数据[/FACE][/SIZE][/SIZE][P][FACE=宋体][SIZE=9pt][FACE=宋体][SIZE=9pt]在初始化页面加载完先前存储的数据后，我们通过执行selectAll()方法来获取数据：[/FACE][/SIZE][/FACE][/SIZE][/P][P][FACE=宋体][SIZE=9pt][FACE=宋体][SIZE=9pt][/FACE][/SIZE][/FACE][/SIZE][/P][P][FACE=宋体][SIZE=9pt][FACE=宋体][SIZE=12px]
[/FACE][/SIZE][/FACE][/SIZE][/P][P][FACE=宋体][SIZE=9pt][FACE=宋体][SIZE=12px]
[/FACE][/SIZE][/FACE][/SIZE][/P][P][FACE=宋体][SIZE=9pt][FACE=宋体][SIZE=12px] [/FACE][/SIZE][CODE]
function selectAll(){
DEMODB.transaction(
function (transaction) {
transaction.executeSql("SELECT * FROM page_settings;", [],dataSelectHandler, errorHandler);
}
);
}
[/CODE][/FACE][/SIZE][/P][P][FACE=宋体][SIZE=9pt][FACE=宋体][SIZE=9pt][/FACE][/SIZE][/FACE][/SIZE][/P][P][FACE=宋体][SIZE=9pt][FACE=宋体][SIZE=9pt][/FACE][/SIZE][/FACE][/SIZE][/P][P][FACE=宋体][SIZE=9pt][FACE=宋体][SIZE=9pt]实例的数据表中只含有一行数据所以我们可以用*来获取其中的每个字段，但如果你需要把这个实例用于你自己的项目中，你你需要处理这里的查询语句。[/FACE][/SIZE][/FACE][/SIZE][/P][P][FACE=宋体][SIZE=9pt][FACE=宋体][SIZE=9pt][/FACE][/SIZE][/FACE][/SIZE][/P][ol][ol][FACE=宋体][SIZE=12px]
[/FACE][/SIZE][/ol][ol][FACE=宋体][SIZE=12px]
[/FACE][/SIZE][/ol][ol][FACE=宋体][SIZE=12px] [/FACE][/SIZE][/ol][CODE]function dataSelectHandler(transaction, results){ // Handle the results for (var i=0; i var row = results.rows.item(i); var newFeature = new Object(); newFeature.fname = row['fname']; newFeature.bgcolor = row['bgcolor']; newFeature.font = row['font']; newFeature.favcar = row['favcar']; $('body').css('background-color',newFeature.bgcolor); $('body').css('font-family',newFeature.font); $('#content').html('Your Favorite Car is a '+ newFeature.favcar +''); if(newFeature.fname != 'none') { $('#greeting').html('Howdy-ho, '+ newFeature.fname+'!'); $('#fname').val(newFeature.fname); } $('select#font_selection').find('option[value='+newFeature.font+']').attr('selected','selected'); $('select#bg_color').find('option[value='+newFeature.bgcolor+']').attr('selected','selected'); $('select#fav_car').find('option[value='+newFeature.favcar+']').attr('selected','selected'); } } [/CODE][/ol][P][FACE=宋体][SIZE=9pt][FACE=宋体][SIZE=9pt][/FACE][/SIZE][/FACE][/SIZE][/P][P][FACE=宋体][SIZE=9pt][FACE=宋体][SIZE=9pt][/FACE][/SIZE][/FACE][/SIZE][/P][P][FACE=宋体][SIZE=9pt][FACE=宋体][SIZE=9pt]这个方法遍历了我们所要的数组并且用JQuery来改变DOM中特定元素的一些CSS属性值。换句话说，我们在jQuery的帮助下利用这个数据改变了HTML的默认值。[/FACE][/SIZE][/FACE][/SIZE][/P][FACE=宋体][SIZE=9pt][SIZE=9pt]更新数据库[/FACE][/SIZE][/SIZE][P][FACE=宋体][SIZE=9pt][FACE=宋体][SIZE=9pt]这个方法读取了表单数据，校验了文本域的数据并更新数据库。[/FACE][/SIZE][/FACE][/SIZE][/P][P][FACE=宋体][SIZE=9pt][FACE=宋体][SIZE=9pt][/FACE][/SIZE][/FACE][/SIZE][/P][P][FACE=宋体][SIZE=9pt][FACE=宋体][SIZE=9pt]
[/FACE][/SIZE][/FACE][/SIZE][/P][P][FACE=宋体][SIZE=9pt][FACE=宋体][SIZE=12px]
[/FACE][/SIZE][/FACE][/SIZE][/P][P][FACE=宋体][SIZE=9pt][FACE=宋体][SIZE=12px]
[/FACE][/SIZE][/FACE][/SIZE][/P][P][FACE=宋体][SIZE=9pt][FACE=宋体][SIZE=12px] [/FACE][/SIZE][CODE]
function updateSetting(){
DEMODB.transaction(
function (transaction) {
if($('#fname').val() != '') {
var fname = $('#fname').val();
} else {
var fname = 'none';
}
var bg = $('#bg_color').val();
var font = $('#font_selection').val();
var car = $('#fav_car').val();
transaction.executeSql("UPDATE page_settings SET fname=?, bgcolor=?, font=?, favcar=? WHERE id = 1", [fname, bg, font, car]);
}
);
selectAll();
}
[/CODE][/FACE][/SIZE][/P][P][FACE=宋体][SIZE=9pt][FACE=宋体][SIZE=9pt][/FACE][/SIZE][/FACE][/SIZE][/P][P][FACE=宋体][SIZE=9pt][FACE=宋体][SIZE=9pt][/FACE][/SIZE][/FACE][/SIZE][/P][FACE=宋体][SIZE=9pt][SIZE=9pt]删除数据表[/FACE][/SIZE][/SIZE][P][FACE=宋体][SIZE=9pt][FACE=宋体][SIZE=9pt]我们大可以用DELETE的查询语句来删除一行数据，但是因为我们已经校验过数据，这里直接删掉整个数据表更有意义。[/FACE][/SIZE][/FACE][/SIZE][/P][P][FACE=宋体][SIZE=9pt][FACE=宋体][SIZE=9pt][/FACE][/SIZE][/FACE][/SIZE][/P][P][FACE=宋体][SIZE=9pt][FACE=宋体][SIZE=12px]
[/FACE][/SIZE][/FACE][/SIZE][/P][P][FACE=宋体][SIZE=9pt][FACE=宋体][SIZE=12px]
[/FACE][/SIZE][/FACE][/SIZE][/P][P][FACE=宋体][SIZE=9pt][FACE=宋体][SIZE=12px] [/FACE][/SIZE][CODE]
function dropTables(){
DEMODB.transaction(
function (transaction) {
transaction.executeSql("DROP TABLE page_settings;", [], nullDataHandler, errorHandler);
}
);
console.log("Table 'page_settings' has been dropped.");
location.reload();
}
[/CODE][/FACE][/SIZE][/P][P][FACE=宋体][SIZE=9pt][FACE=宋体][SIZE=9pt][/FACE][/SIZE][/FACE][/SIZE][/P][P][FACE=宋体][SIZE=9pt][FACE=宋体][SIZE=9pt][/FACE][/SIZE][/FACE][/SIZE][/P][P][FACE=宋体][SIZE=9pt][FACE=宋体][SIZE=9pt]在数据表被删除后，页面因为刷新而触发了先前定义的数据库初始化安装程序。[/FACE][/SIZE][/FACE][/SIZE][/P][FACE=宋体][SIZE=9pt][SIZE=9pt]涉及的例子[/FACE][/SIZE][/SIZE][P][FACE=宋体][SIZE=9pt][FACE=宋体][SIZE=9pt][URL=http://blog.darkcrimson.com/samples/localdb/]在线例子[/URL] [URL=http://blog.darkcrimson.com/samples/localdb/darkcrimson_localdb_demo.zip]源代码[/URL][/FACE][/SIZE][/FACE][/SIZE][/P][P][FACE=宋体][SIZE=9pt][FACE=宋体][SIZE=9pt]————————–翻译结束——–[/FACE][/SIZE][/FACE][/SIZE][/P][FACE=宋体][SIZE=9pt][SIZE=9pt]我的总结[/FACE][/SIZE][/SIZE][P][FACE=宋体][SIZE=9pt][FACE=宋体][SIZE=9pt]其实整个教程重点在于:[/FACE][/SIZE][/FACE][/SIZE][/P][P][FACE=宋体][SIZE=9pt][FACE=宋体][SIZE=9pt][/FACE][/SIZE][/FACE][/SIZE][/P][P][FACE=宋体][SIZE=12px]
[/FACE][/SIZE][/P][P][FACE=宋体][SIZE=12px]
[/FACE][/SIZE][/P][P][FACE=宋体][SIZE=12px] [/FACE][/SIZE][CODE]
DEMODB = openDatabase(
shortName, //数据库名，浏览器和SQL语句中会用到
version, //openDatabase 的版本
displayName, //数据库显示的全名/描述
maxSize //数据库期望的上限体积大小
);
[/CODE][/P][P][FACE=宋体][SIZE=9pt][FACE=宋体][SIZE=9pt][/FACE][/SIZE][/FACE][/SIZE][/P][P][FACE=宋体][SIZE=9pt][FACE=宋体][SIZE=9pt][/FACE][/SIZE][/FACE][/SIZE][/P][P][FACE=宋体][SIZE=9pt][FACE=宋体][SIZE=9pt]以及：[/FACE][/SIZE][/FACE][/SIZE][/P][P][FACE=宋体][SIZE=9pt][FACE=宋体][SIZE=9pt][/FACE][/SIZE][/FACE][/SIZE][/P][P][FACE=宋体][SIZE=12px]
[/FACE][/SIZE][/P][P][FACE=宋体][SIZE=12px]
[/FACE][/SIZE][/P][P][FACE=宋体][SIZE=12px] [/FACE][/SIZE][CODE]
DEMODB.transaction(
function (transaction) {
transaction.executeSql(sqlStatement, arguments, callback, errorCallback);
}
);
function callback(transaction, results){
for (var i=0; i
var row = results.rows.item(i);//row为每一行
xx=row['colName'];//colName为字段名
}
}
[/CODE][/P][P][FACE=宋体][SIZE=9pt][FACE=宋体][SIZE=9pt][/FACE][/SIZE][/FACE][/SIZE][/P][P][FACE=宋体][SIZE=9pt][FACE=宋体][SIZE=9pt][/FACE][/SIZE][/FACE][/SIZE][/P][P][FACE=宋体][SIZE=9pt][FACE=宋体][SIZE=9pt]这里还有一个例子：点击这里。[/FACE][/SIZE][/FACE][/SIZE][/P][P][FACE=宋体][SIZE=9pt][FACE=宋体][SIZE=9pt]更多关于Web SQL Database的资料可以参阅[URL=http://dev.w3.org/html5/webdatabase/]W3C文档[/URL]。[/FACE][/SIZE][/FACE][/SIZE][/P][P][FACE=宋体][SIZE=9pt][/FACE][/SIZE][/P]