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

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/5481667/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-25 17:20:20  来源:igfitidea点击:

HTML5 - Load Web SQL DB from local file?

javascriptsqlitehtml

提问by

Let's use a great demo as an example here.

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

Let's say I create 5 sticky notes as an "administrator". My browser has a SQLite DB with these 5 sticky notes and their respective positions and text. I then export this DB file to the local server where the page is hosted. Let's then say that a "user" on another computer loads this page up and, by default, sees my 5 sticky notes; how do I make the page load a SQLite DB from a local file, e.g. /var/www/html/db_files/5-sticky-notes.db, so that end-users can interact with my sticky notes?

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

This is the code for loading the end-user's database from their personal browser:

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

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) { 

}

采纳答案by Sunday Ironfoot

There's no way to do this natively in the browser, but it is possible I reckon.

没有办法在浏览器中本地执行此操作,但我认为有可能。

You'd have initiate an Ajax request to send the data from your local database to the server, then a new user visiting your website would also have an Ajax request to pull down the data from the server, into their local database.

您已经发起了一个 Ajax 请求,将数据从您的本地数据库发送到服务器,然后访问您网站的新用户也会有一个 Ajax 请求,将数据从服务器拉入他们的本地数据库。

Very very rough pseudo code:

非常非常粗略的伪代码:

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
}

However, if you're going to allow other people to look at your sticky notes, why bother with a local HTML5 database at all? Just store them on the server?

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



Edit: I should also point out that WebSQL is a dieing standard, being phased out to be replaced with IndexedDB.

编辑:我还应该指出 WebSQL 是一个消亡的标准,正在逐步淘汰以被 IndexedDB 取代。

回答by wHiTeHaT

I think i found an answer to this old tread:

我想我找到了这个旧胎面的答案:

DEMO Here

演示在这里

Short sample code (provided by the website):

简短的示例代码(由网站提供):

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

ADDITIONAL INFORMATION

附加信息

This only works in browsers (either desktop or mobile) that support the webDBstandard

这仅适用于支持webDB标准的浏览器(桌面或移动)