Web SQL Example

by jpieroabarcam

HTML

<h1>WebSQL Example</h1>

<div id="controls">
  <p>Add a car to the database</p>
  <label>Make: </label><input type="text" id="carmake" /><br />
  <label>Model: </label><input type="text" id="carmodel" /><br />
  <button type="button" id="addcar" onclick="addCar();">Add Car</button>
</div>
<div id="carlistholder">
  <h3>Your Cars</h3>
  <ul id="carlist">
  </ul>
</div>
<p><strong>Note: </strong>You can leave this page and when you return the cars you entered will still be here!</p>

CSS

body {
  font-family: sans-serif;
  padding: 10px;
}

h1 {
  font-weight: bold;
}

label {
  font-size: small;
}

#controls {
  padding-bottom: 5px;
  border-bottom: 1px solid #000;
}

JavaScript

//Test for browser compatibility
if (window.openDatabase) {
  //Create the database the parameters are 1. the database name 2.version number 3. a description 4. the size of the database (in bytes) 1024 x 1024 = 1MB
  var mydb = openDatabase("cars_db", "0.1", "A Database of Cars I Like", 1024 * 1024);

  //create the cars table using SQL for the database using a transaction
  mydb.transaction(function(t) {
    t.executeSql("CREATE TABLE IF NOT EXISTS cars (id INTEGER PRIMARY KEY ASC, make TEXT, model TEXT)");
  });



} else {
  alert("WebSQL is not supported by your browser!");
}

//function to output the list of cars in the database

function updateCarList(transaction, results) {
  //initialise the listitems variable
  var listitems = "";
  //get the car list holder ul
  var listholder = document.getElementById("carlist");

  //clear cars list ul
  listholder.innerHTML = "";

  var i;
  //Iterate through the results
  for (i = 0; i < results.rows.length; i++) {
    //Get the current row
    var row = results.rows.item(i);

    listholder.innerHTML += "<li>" + row.make + " - " + row.model + " (<a href='javascript:void(0);' onclick='deleteCar(" + row.id + ");'>Delete Car</a>)";
  }

}

//function to get the list of cars from the database

function outputCars() {
  //check to ensure the mydb object has been created
  if (mydb) {
    //Get all the cars from the database with a select statement, set outputCarList as the callback function for the executeSql command
    mydb.transaction(function(t) {
      t.executeSql("SELECT * FROM cars", [], updateCarList);
    });
  } else {
    alert("db not found, your browser does not support web sql!");
  }
}

//function to add the car to the database

function addCar() {
  //check to ensure the mydb object has been created
  if (mydb) {
    //get the values of the make and model text inputs
    var make = document.getElementById("carmake").value;
    var model = document.getElementById("carmodel").value;

    //Test to ensure...