3

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?

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

}
Improve this question
4
  • 1
    Wait... your browser's SQLite has 5 sticy notes. Another user on another computer opens a browser, and you want him/her to see the 5 sticky notes on your computer? Commented Mar 30, 2011 at 5:39
  • Not quite...sorry if the explanation is poor! I just want to be able to export the DB file from my browser to a file on the server, and the end-users will automatically load that file into their cache, thus being able to see my 5 sticky notes. Commented Mar 30, 2011 at 6:27
  • In this case, you've already described what you need to do. Just implement what you just mentioned in your comment. :-) Commented Mar 30, 2011 at 7:07
  • 2
    You probably want to just include the sticky-notes in the HTML that you serve to your user's browser, and use JavaScript to extract those notes and store to SQLite. If you can't change the HTML, then format it as a JSON file and use XHR to load it. Commented Mar 30, 2011 at 7:08

2 Answers 2

Reset to default
2

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 webDB standard

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

1

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 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?

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

Improve this answer

5 Comments

I was just trying something new! I can see the db inside chrome, but couldn't find a method to get it out as a file. I figured it would be cool to reference an initial DB file just like you reference CSS/JS.
There's no file you interact with per se (although it might be buried somewhere in the Users/AppData folder), it's just a local database in the browser.
Would be pretty cool to be able to force the browser to load a local DB into cache though, no?
I was just reading an article about Indexed DB being adopted and agreed upon, and something about Google checking in Webkit code for it. Damned specifications!
infact i have a simular question, i want to share also a pre-configured database,grab the pre-configured file,and insert it for example in my mobile-phone app folder.when open the webapp,the data is inside already.I require such feature to syncronize an admin(on mydesktop pc) script and a mobile phone script.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.