HTML5 and WebSQL Databases

By Andy Harris from HTML5 For Dummies Quick Reference

Most high-end data applications use the relational database model to store data. HTML5 introduces a radical new model. The browser actually includes its own database program (based on the popular SQLite engine), and you can build and manage a database directly on the client!

The following SQL code builds a simple database table called contact and adds three values to the table:

DROP TABLE IF EXISTS contact;
CREATE TABLE IF NOT EXISTS contact (id, name, email);
INSERT INTO contact VALUES(1, 'Andy','andy@aharrisbooks.net');
INSERT INTO contact VALUES(2, 'Bill', 'bgates@msBob.com');
INSERT INTO contact VALUES(3, 'Steve', 'sJobs@newton.com');

The SQL language is powerful and complex. Experiment with webSQL features only if you're already familiar with standard SQL. If you want to experiment with the form of SQL used in webSQL, visit SQLite.

The popular SQLite database engine is available in many forms. You can download a native version for your platform, or you can use the SQLite manager extension for Firefox. Also, recent versions of Chrome have a database console available. (Right-click anywhere on the page and choose Inspect Element.) The developer tools dialog will appear, and you can use the Storage tab to see any locally-defined databases. If you have a database defined in your page, you can type SQL commands into the console to manage and update the database manually.