【译】HTML5 的Web SQL Databases-本地数据库中文教程

Tagged: ,, | Cat: HTML, javascript | 9 Comments

针对本地数据储存，W3C提及到四种不同的方法，每一种方法都很精彩，但是今天要提及的只是其中一种：Web SQL Databases。

HTML5的Web SQL Databases的很诱惑人，当你发现可以用与mysql查询一样的查询语句来操作本地数据库时，你会发现这东西挺有趣的，遗憾找不到中文教程，我这里只好特意翻译一篇文章（原文):

————————–翻译启动——–

从Safari 4,iPhone/iPad OS3,Chome 5以及Opera 10.5(桌面版)开始，HTML5 Local Database就开始被支持。我从这里了解到HTML5 Local Database，并且已经研究了一段时间，因此我决定做几个简单的例子来告诉你该怎么去使用它。

建立数据库

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

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

首先我们得先检测一下浏览器是否支持openDatabase这个方法，假如支持我们才能定义里头的参数：

  • shortName 数据库名，浏览器和SQL语句中会用到
  • version openDatabase 的版本. 这里用的是1.0  (点击了解更多)
  • displayName 数据库显示的全名/描述
  • maxSize 数据库期望的上限体积大小。需要内存管理时，这个参数是必要的。

然后，调用createTables()，用于进行数据表的定义，以及对数据表预填充一些初始化数据（可选）。

建立数据表

1
2
3
4
5
6
7
8

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();
}

这个简单的方法用executeSql函数执行了如’CREATE TABLE’的sql语句。这里的sql语法是基于SQLLite的，对于大部分web/手机开发者来说应该不陌生。在这个实例中，我们创建了page_settings数据表并且先预填充一些初始化数据。

1
2
3
4
5
6
7
8
9

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]]);
        }
    );
}

Note: although we don’t really need a PK for such a basic demo it will be there for future extensions and advancements.（这一句不知道不知道他在说啥>_<）

现在数据库已经被初始化，建立了一个数据表并且里面有一行默认数据。因为数据是被保存到本地，所以尽管你刷新或者关闭页面数据都还是在的。想直观点在Safari中看到这些数据，打开‘开发-错误控制台-储存’，你就能看到这个数据库以及增加或者改变的内容。

选择数据

在初始化页面加载完先前存储的数据后，我们通过执行selectAll()方法来获取数据：

1
2
3
4
5
6
7

function selectAll(){
    DEMODB.transaction(
        function (transaction) {
            transaction.executeSql("SELECT * FROM page_settings;", [],dataSelectHandler, errorHandler);
        }
    );
}

实例的数据表中只含有一行数据所以我们可以用*来获取其中的每个字段，但如果你需要把这个实例用于你自己的项目中，你你需要处理这里的查询语句。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

function dataSelectHandler(transaction, results){
    // Handle the results
    for (var i=0; i<results.rows.length; 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('<h4 id="your_car">Your Favorite Car is a '+ newFeature.favcar +'</h4>');
        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'); 
    }
}

这个方法遍历了我们所要的数组并且用JQuery来改变DOM中特定元素的一些CSS属性值。换句话说，我们在jQuery的帮助下利用这个数据改变了HTML的默认值。

更新数据库

这个方法读取了表单数据，校验了文本域的数据并更新数据库。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

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();
}

删除数据表

我们大可以用DELETE的查询语句来删除一行数据，但是因为我们已经校验过数据，这里直接删掉整个数据表更有意义。

1
2
3
4
5
6
7
8
9

function dropTables(){
    DEMODB.transaction(
        function (transaction) {
            transaction.executeSql("DROP TABLE page_settings;", [], nullDataHandler, errorHandler);
        }
    );
    console.log("Table 'page_settings' has been dropped.");
    location.reload();
}

在数据表被删除后，页面因为刷新而触发了先前定义的数据库初始化安装程序。

涉及的例子

在线例子 源代码

————————–翻译结束——–

我的总结

其实整个教程重点在于:

1
2
3
4
5
6

DEMODB = openDatabase(
    shortName, //数据库名，浏览器和SQL语句中会用到
    version, //openDatabase 的版本
    displayName, //数据库显示的全名/描述
    maxSize //数据库期望的上限体积大小
);

以及：

1
2
3
4
5
6
7
8
9
10
11

DEMODB.transaction(
    function (transaction) {
        transaction.executeSql(sqlStatement, arguments, callback, errorCallback);
    }
);
function callback(transaction, results){
    for (var i=0; i<results.rows.length; i++) {
        var row = results.rows.item(i);//row为每一行
        xx=row['colName'];//colName为字段名
    }
}

这里还有一个例子：点击这里。

更多关于Web SQL Database的资料可以参阅W3C文档。

9 Responses to 【译】HTML5 的Web SQL Databases-本地数... »

RSS Feed for this Entry.
  1. zebo 评论 2010-10-17 22:08

    The API is asynchronous and uses callback functions to track the results of a database query.
    94這句話…

    回复

    joe 回复 十月 17th, 2010 at 22:09

    你在说什么

    回复

    zebo 回复 十月 17th, 2010 at 22:21

    异步的并且用callback函数处理查询结果。那不是我说的，是http://webkit.org/blog/126/webkit-does-html5-client-side-database-storage/里面一句话。>_<

    回复

    joe 回复 十月 18th, 2010 at 09:02

    嗯，会给callback函数两个参数，其中就有结果集

  2. crossyou 评论 2010-10-18 00:22

    感觉很强大，不过没想到要本地建立数据库的意义有多大，具体能干嘛用。除了能存储大量数据外。

    回复

    joe 回复 十月 18th, 2010 at 09:03

    联系一下web的封装，会变成一种类似ipohne的app程序

    回复

  3. 小鱼 评论 2010-11-07 10:10

    就是麻烦，但是不能不用

    回复

  4. 猪之哀伤 评论 2010-11-09 13:31

    Note: although we don’t really need a PK for such a basic demo it will be there for future extensions and advancements.（这一句不知道不知道他在说啥>_<）
    ============================
    虽然在这个基本的demo中，我们并不真正需要这个主键（指id，PK=primary key），但是他在之后的扩展和改造中将会被用到。

    我猜应该是这么个意思吧。= =

    回复

  5. 【译】HTML5 的Web SQL Databases-本地数据库中文教程 Pingback 2011-05-24 11:20

    [...] 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 function initDatabase() { try { if (!window.openDatabase) { alert(’Databases are not supported in this browser.’); [...] View full post on 写笔记的小JOE页 [...]

TrackBack URL

Leave a Reply

Email address is not published

You should say a Chinese word to pass spam check. If you can not input Chinese, just copy 你好 and paste them into comment text box.