PhoneGap上的SQLite数据库

23

我希望使用PhoneGap为iPhone实现SQLite数据库。我知道如何在iPhone本地应用程序中使用基本的SQLite数据库,但是如何在PhoneGap中实现SQLite数据库呢?

5个回答

29

我们最终使用了PhoneGap SQLite插件,原因如下:

我们最初在PhoneGap应用程序中使用普通的Web SQL数据库,但遇到以下限制:

  • 数据库大小限制为5MB(用户可以提示允许更多,但我们不想在应用程序中出现这样的提示)
  • 通过JavaScript预填充数据库会增加初始应用程序加载时间

我们最初通过将预填充的sqlite3数据库复制到一个特殊目录来解决此问题,Webkit会从中拾取它(例如,正如here所描述的那样)

但是,在我们最新尝试提交应用程序时,我们被告知该应用程序违反了iOS数据存储指南,可能是因为它正在将数据库文件复制到非标准位置。

因此,我们改用PhoneGap SQLite插件:这使我们能够在我们的应用程序中包含一个大型的预填充的sqlite3数据库,并通过插件从JavaScript访问它。不幸的是,插件提供的JavaScript接口与浏览器不完全相同,但它们非常接近。


@James,你有使用该插件的示例链接吗?我刚刚经历了与你完全相同的过程。但是现在我阅读了这篇文章后,认为我也应该使用这个插件。 - mao
@mao 我这里没有可以发布的示例,但我发现在 https://github.com/davibe/Phonegap-SQLitePlugin 项目的自述文件中,按照说明和示例非常容易。 - James
抱歉让你受苦了,我能问一下你使用的是哪个PhoneGap版本和插件吗?它在1.2版本上无法工作。 - mao
啊,我还在使用Phonegap 1.1.0版本。如果你找到了如何让它与1.2版本兼容的方法,请将更改上传至GitHub供我们所有人使用 :) - James
@mao 我的页面完整实现了一个预填充的PhoneGap Storage API和Cordova 2.0.0,包括HTML、JS和CSS:http://iphonedevlog.wordpress.com/2012/08/21/prepopulated-database-using-phonegap-storage-api-cordova-2-0-0/ - Steve

21
重要的是要记住,PhoneGap 是在浏览器组件中打包的 Web 应用程序。适用于移动 WebKit 的所有内容也同样适用于 PhoneGap,而在 PhoneGap 中的环境也非常类似于在桌面浏览器中打开 HTML 文件。
您需要所谓的“Web SQL 数据库”。

http://www.w3.org/TR/webdatabase/

编辑:自本回答撰写以来,该规范已被标记为已弃用,现在依赖它是一个官方的坏主意™。

实际上,在大多数支持它的浏览器中,它基于SQLite,但它不会完全成为the SQLite实现。但很接近。在Chrome或Safari中,您可以使用开发人员工具查看其内容,查看“资源”选项卡 -> 数据库(您需要在桌面浏览器上测试基本功能,然后再尝试PhoneGap)。

它在PhoneGap中的工作方式与桌面浏览器中的完全相同。

Web SQL数据库是更广泛地称为“本地存储”的实现之一。我认为,在Mark Pilgrim的“深入HTML5”中可以找到关于这个主题的最好的介绍性文本:

http://diveintohtml5.info/storage.html

对于PhoneGap和桌面浏览器来说,仍然同样有效。


5

我使用这个工具在PhoneGap中实现了SQLite数据库:

document.addEventListener("deviceready",onDeviceReady,false);

function onDeviceReady()
{
    initDB();
    createTables();
}

errorHandler = function (transaction, error) { 
    // returns true to rollback the transaction
    return true;  
} 

// null db data handler
nullDataHandler = function (transaction, results) { } 

function initDB() 
{

    try { 
        if (!window.openDatabase) { 
            alert('not supported'); 
        } else { 
            var shortName = 'WineDatabase'; 
            var version = '1.0'; 
            var displayName = 'PhoneGap Test Database'; 
            var maxSize = 655367; // in bytes 
            mydb = openDatabase(shortName, version, displayName, maxSize); 
        }
    } catch(e) { 
        // Error handling code goes here. 
        if (e == INVALID_STATE_ERR) { 
            // Version number mismatch. 
            alert("Invalid database version."); 
        } else { 
            alert("Unknown error "+e+"."); 
        } 
        return; 
    } 
}



// create tables for the database ************

function createTables() 
{

    try {
        //alert("Create table");
        mydb.transaction(
                         function(transaction) 
                         {
                         var sqlC='CREATE TABLE IF NOT EXISTS Wine_Table(id INTEGER NOT NULL PRIMARY KEY, key TEXT, color TEXT,date TEXT,heading TEXT,img_Path TEXT,name TEXT,price TEXT,whr TEXT,notes TEXT);';
                         transaction.executeSql(sqlC, [], nullDataHandler, errorHandler); 
                         });

    } catch(e) {
        /// alert(e.message);
        return;
    }
}



//insert into database

function insertIntoDataBase()
{
    //Select Row for checking of duplicate Key.....*********

    try 
    {
        mydb.transaction(
                         function(transaction) {
                         transaction.executeSql('SELECT *FROM Wine_Table',[], InsertValues, errorHandler);
                         });

    }
    catch(e) 
    {
        alert(e.message);
    }

    //...Selection ended..*****************
}


InsertValues=function(transaction, results)
{
    var name=document.getElementById('name').value;
    var imagesrc=$('#changeImageBtn').attr('src');
    var where=document.getElementById('where').value;
    var price=document.getElementById('price').value;
    var datepickervalue=document.getElementById('date1').value;
    var color;



    //Checking Area.....

    var len = results.rows.length;
    var getKey;
    if(len!=0)
    {
            for (var i=0; i<results.rows.length; i++) 
            { 
                getKey=results.rows.item(i).key;
                if(getKey==name)
                {
                    matchkey=1;
                    updateKey=results.rows.item(i).id;
//                  alert("update key= "+updateKey);
//                  alert("get key "+getKey);
                }
            }
    }

//... Checking area closed...

//for insert in to database....
    var sqlI = "INSERT INTO Wine_Table(key,color,date,heading,img_Path,name,price,whr,notes) VALUES('"
    + name
    + "','"
    + color
    + "','"
    + datepickervalue
    + "','"
    + name
    + "','"
    + imagesrc
    + "','"
    + name + "','" + price + "','" + where +"','"+notes+"')";


//for updating data base....

    var sqlU='UPDATE Wine_Table SET key="'+name+'",color="'+color+'",date="'+datepickervalue+'",heading="'+name+'",img_Path="'+imagesrc+'",name="'+name+'",price="'+price+'",whr="'+where+'",notes="'+notes+'" WHERE id="'+updateKey+'"';


    if(isEdit==0 && matchkey==0)
    {
//insering........************
        try 
        {
            mydb.transaction(
                             function(transaction) {
                             transaction.executeSql(sqlI, [], nullDataHandler, errorHandler); 
                             });
        } catch(e) 
        {
            /// alert(e.message);
            return;
        }
        alert("inserted successfully");
    }
    else
    {
//updating ........***********
        try 
        {
            mydb.transaction(
                             function(transaction) {
                             transaction.executeSql(sqlU, [], nullDataHandler, errorHandler); 
                             });
        } catch(e) 
        {
            /// alert(e.message);
            return;
        }

        alert("Update successfully");
        matchkey=0;
    }
}



celebsDataHandler=function(transaction, results) 
{
    // Handle the results 
    var name;
    var imageFD;
    var where; 
    var priceFD;
    var dateFD;
    var color;
    var notes; 
    var headingFD;
    var ID;


    var UL;
    var List;
    var link;
    var image;
    var heading;
    var date;
    var price;

    var len = results.rows.length;
    if(len!=0)
    {
    for (var i=0; i<results.rows.length; i++) 
    { 

        resultArr[i]=results.rows.item(i);
        ID=results.rows.item(i).id;
        name=results.rows.item(i).key;
        imageFD=results.rows.item(i).img_Path;
        where=results.rows.item(i).whr; 
        priceFD=results.rows.item(i).price;
        datepicker=results.rows.item(i).date;
        color=results.rows.item(i).color;
        notes=results.rows.item(i).notes;
        headingFD=results.rows.item(i).heading;
        dateFD=results.rows.item(i).date;

        UL=document.getElementById("wineList");
        List=document.createElement('li');
        //List.setAttribute('data-icon','alert');
        List.setAttribute('class','listShow');
        if(deleterow==1)
        {
            List.setAttribute('data-icon','minus');
        }

        link=document.createElement('a');

        if(deleterow==0)
        link.setAttribute('href','#NewWine');

        link.setAttribute('class','anchor');

        image=document.createElement('img');
        image.setAttribute('src',imageFD);
        image.setAttribute('class','ui-li-thumb');

        heading=document.createElement('h3');
        heading.innerHTML=headingFD;

        date=document.createElement('p');
        date.innerHTML=dateFD;

        price=document.createElement('p');
        price.innerHTML=priceFD;


        link.appendChild(image);
        link.appendChild(heading);
        heading.appendChild(date);
        link.appendChild(price);
        List.appendChild(link);

        UL.appendChild(List);
        addClickEvent(List,name,ID);

    } 
        $('ul').listview('refresh');
    }
}

我希望这对你有很大帮助。它包含了创建、更新、插入,以及事务处理后的结果等等!


2

所有适用于移动WebKit的内容也适用于PhoneGap,而在PhoneGap中的环境也非常类似于在桌面浏览器中打开HTML文件。

这并不完全正确;例如,在iPhone上,UIWebView不能创建一个相对较大的WebSQL数据库,而在移动/桌面Safari中可以通过JavaScript编程方式创建,而不需要调用被苹果认为是私有API的委托方法(因此无法在应用商店中接受)。这实际上是一个真正的问题。


2

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接