Html5 - Load Web Sql Db From Local File?

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 posi

Solution 1:

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 filevar startTime = newDate();
                html5sql.process(
                    sql,
                    function(){ //Successvar endTime = newDate();
                        $("#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 webDB standard

Solution 2:

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.

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 databaseif(!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?

---

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