WebSQL

Another option for saving data offline in a browser is WebSQL

The Web SQL database API isn’t actually part of the HTML5 specification, but it is part of the suite of specifications
W3C is no longer actively working on the Web SQL Database specification.

Not many browsers support this so only use Chrome or Safari to see examples working

Web SQL database stats: http://caniuse.com/sql-storage

Working demo available at: http://glynrob.com/webapp/websql/
Working code example available at https://github.com/glynrob/websql

This is the same as the webstorage example so refer to that for additional data about the code not related to WebSQL.

WebSQL

Create new database:

First we want to try and create a new database then add a table to store our data in:

This will alert those users that are on browsers that are not supported that this site will not work for them.

If their browser is supported then a new SQLlite database will be created in their browser for you to save information to.

Load saved data:

If we have saved data then we need to be able to get it out of the database.

This loops through all fields in the database and loads all information into a javascript object to manage after.

A couple of functions at the end to run the required code to display out the data that is saved.

Save Data:

So how do we save data in this database.

My function actually does 2 things.

First it drops the table and recreates it. This is because Truncate is not available on SQLlite and this reduces code to manage the table as I save the whole javascript object.

Second it loops through all elements in the javascript object adding it to the table.

Should I use this:

My answer is no.

Its nice to play with but it is not supported widly enough.

The ability of searching through the tables is very nice and if this was a standard then I would agree that this would be great to use.

2 comments for “WebSQL

  1. August 14, 2013 at 7:25 pm

    So what do you suggest to use then? For offline capable data ?

  2. GlynRob
    August 21, 2013 at 1:51 pm

    LocalStorage is well supported across browsers:
    http://glynrob.com/javascript/calculate-localstorage-space
    You are limited to the amount of space available though.

    Another option is something like http://www.sequelsphere.com or http://www.jstorage.info

Leave a Reply

Your email address will not be published. Required fields are marked *