HTML5 - 从本地文件加载 Web SQL DB？

Question

让我们在这里使用一个很棒的演示。

假设我作为“管理员”创建了 5 张便签。我的浏览器有一个 SQLite DB，其中包含这 5 个便签及其各自的位置和文本。然后，我将此数据库文件导出到托管该页面的本地服务器。然后，假设另一台计算机上的“用户”加载此页面，并且默认情况下看到我的 5 个便笺；如何使页面从本地文件（例如 /var/www/html/db_files/5-sticky-notes.db）加载 SQLite 数据库，以便最终用户可以与我的便笺进行交互？

这是从最终用户的个人浏览器加载其数据库的代码：

var db;

try {
    if (window.openDatabase) {
        db = openDatabase("5-sticky-notes", "1.0", "HTML5 Database API example", 200000);
        if (!db)
            alert("Failed to open the database on disk.  This is probably because the version was bad or there is not enough space left in this domain's quota");
    } else
        alert("Couldn't open the database.  Please try with a WebKit nightly with this feature enabled");
} catch(err) { 

}

Answer 1

我想我找到了这个旧问题的答案：

DEMO Here

简短的示例代码（由网站提供）：

$(function(){
var demoRunning = false;

$("#startTest").click(function(){
    if(!demoRunning){
        $(this).addClass("running");
        $("#demoRunning").show();
        $("#results").text("running...");
        demoRunning = true;
        try {
            html5sql.openDatabase("demo", "Demo Database", 5*1024*1024);

            $.get('demo-statements.sql',function(sql){ //Your server created sticky notes database file
                var startTime = new Date();
                html5sql.process(
                    sql,
                    function(){ //Success
                        var endTime = new Date();
                        $("#results").text("Table with 11000 entries created in: " +
                                            ((endTime - startTime) / 1000) + "s");
                        $("#startTest").removeClass("running");
                        $("#demoRunning").hide();
                        demoRunning = false;
                    },
                    function(error, failingQuery){ //Failure
                        $("#results").text("Error: " + error.message);
                        $("#startTest").removeClass("running");
                        $("#demoRunning").hide();
                        demoRunning = false;
                    }
                );
            });

        } catch (error) {
            $("#results").text("Error: " + error.message);
            $("#startTest").removeClass("running");
            $("#demoRunning").hide();
            demoRunning = false;
        }
    }
})
});

附加信息

这只适用于支持webDB标准的浏览器（桌面或移动）

Answer 2

浏览器中无法本地执行此操作，但我认为这是可能的。

您将发起一个 Ajax 请求，将数据从本地数据库发送到服务器，然后访问您网站的新用户也会收到一个 Ajax 请求，将数据从服务器拉取到本地数据库中。

非常非常粗糙的伪代码：

var db;

try
{
    if (window.openDatabase)
    {
        db = openDatabase("5-sticky-notes", "1.0", "HTML5 Database API example", 200000);

        var stickyNotesInDatabase // some code to determine if sticky notes are in the users local database

        if(!stickyNotesInDatabase)
        {
            $.getJson('/GetStickyNotes', function(data)
            {
                // Load data into database from JSON 'data' variable
            });
        }
    }
    else
    {
        // Handle no database support
    }
}
catch(err)
{ 
    // Handle error
}

但是，如果您要允许其他人查看您的便签，为什么还要费心使用本地 HTML5 数据库呢？只需将它们存储在服务器上？

---

编辑：我还应该指出，WebSQL 是一个即将消亡的标准，正在逐步淘汰并被 IndexedDB 取代。