HTML5 Examples For Beginners : Web Sql

f. Web SQL

Earlier known as WebDB. It introduces a set of APIs to manipulate client-side databases using SQL.

Browser support: Internet Explorer : Not supported, Firefox: Not Supported, Chrome: 4.0+, Android: 2.0+, Safari: 4.0+

Web SQL Database specification is no longer being maintained and support may be dropped in future versions. Of browsers.

The W3C Web Applications Working Group ceased working on the specification in November 2010, citing a lack of independent implementations (i.e., the use of a database system other than SQLite as the backend) as the reason the specification could not move forward to become a W3C Recommendation. One potential alternative storage standard is IndexedDB (Discussed in next section).

Below one example is provided to create a To Do list using WebSQL.

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="utf-8">
   <title>Web SQL</title>
</head>
<body>
   <div class="center" id="websqldb-example">
   <button onclick="webSqlSample.createTable()">Create To Do List</button><br/>
   Type to add to To Do list: <input type="text" id="todoitem" />
   <button onclick="webSqlSample.newRecord()">Add Item</button>
   <br/>
   <button onclick="webSqlSample.dropTable()">Delete To Do List</button>
   <ul class="todo-list" id="db-results"></ul>
   <div id="db-log"></div>
   </div>
<script defer>
   var webSqlSample = (function() {
   var db;
   var log = document.getElementById('db-log');

   if (window.openDatabase) {
   db= openDatabase("DBTest", "1.0", "Web SQL Example", 200000);
   showRecords();
   }
   document.getElementById('db-results').addEventListener('click', function(e) { e.preventDefault(); }, false);

   function onError(tx, error) {
   log.innerHTML = '<p class="error">Error: ' + error.message + '</p>';
   }

   function createTable() {
   db.transaction(function(tx) {
   tx.executeSql("CREATE TABLE ToDoList (id REAL UNIQUE, text TEXT)", [],
   function(tx) { log.innerHTML = '<p>"ToDoList" created!</p>' },
   onError);
   });
   }

   function updateRecord(id, textEl) {
   db.transaction(function(tx) {
   tx.executeSql("UPDATE ToDoList SET text = ? WHERE id = ?", [textEl.innerHTML, id], null, onError);
   });
   }

   function deleteRecord(id) {
   db.transaction(function(tx) {
   tx.executeSql("DELETE FROM ToDoList WHERE id=?", [id],
   function(tx, result) { showRecords() },
   onError);
   });
   }

   // delete table from db
   function dropTable() {
   db.transaction(function(tx) {
   tx.executeSql("DROP TABLE ToDoList", [],
   function(tx) { showRecords() },
   onError);
   });
   }
   return {
   newRecord: newRecord,
   createTable: createTable,
   updateRecord: updateRecord,
   deleteRecord: deleteRecord,
   dropTable: dropTable
}
})();
</script>
</body>
</html>

Working example can be viewed here