HTML5 Web SQL

by Ryan Morris

HTML

<div id="controls">
    <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>
<hr/>
<div id="carlistholder">
    <h3>Cars</h3>
    <ul id="carlist">
    </ul>
</div>

JavaScript

//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)");
});

//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 = "";

    //Iterate through the results
    for (var 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</a>)";
        
    }

}

//function to get the list of cars from the database
function outputCars() {
    
    mydb.transaction(function(t) {
        
        t.executeSql("SELECT * FROM cars", [], updateCarList);
        
    });
    
}

//function to add the car to the database
function addCar() {
    
    //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 that the user has entered both a make and model
    if (make !== "" && model !== "") {
        
        //Insert the user entered details into the cars table, note the use of the ? placeholder, these will replaced by the data passed in as an array as the second parameter
        mydb.transaction(function(t) {
            
            t.executeSql("INSERT INTO cars (make, model) VALUES (?, ?)", [make,...