0
回答
【译】HTML5 的Web SQL Databases-本地数据库中文教程
利用AWS快速构建适用于生产的无服务器应用程序,免费试用12个月>>>   

本文转自:http://xiebiji.com/2010/10/web-sql-databases/

针对本地数据储存,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,并且已经研究了一段时间,因此我决定做几个简单的例子来告诉你该怎么去使用它。

建立数据库

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(),用于进行数据表的定义,以及对数据表预填充一些初始化数据(可选)。

建立数据表

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数据表并且先预填充一些初始化数据。
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()方法来获取数据:

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

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

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的默认值。

更新数据库

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

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的查询语句来删除一行数据,但是因为我们已经校验过数据,这里直接删掉整个数据表更有意义。

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

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

涉及的例子

在线例子 源代码

总结

其实整个教程重点在于:

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

以及:

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文档

举报
红薯
发帖于6年前 0回/4K+阅
顶部