Kategorien
HTML5 JavaScript

HTML5 Datenbank mit persistence.js Tutorial

Mit persistence.js lässt sich eine lokale Datenbank mit Javascript erstellen ohne einen Datenbank-Server und eine Internet Verbindung.

Unterstütze mobile OS von persistence.js:

  • Android Browser (getestet auf 1.6 und 2.x)
  • iPhone Browser (iPhone OS 3+)
  • Moderne Webkit Browser (Google Chrome und Safari)
  • Firefox (über Google Gears oder In-Memory Database und LocalStorage Fallback)
  • Opera
  • Palm WebOS (getestet auf 1.4.0)

Download des Projektes: github

Hier eine Beispiel Klasse für die Verwendung von persistence.js

function ItemDatabase() {

    this.Item;

    this.setUpDatabase =  function()
    {
        console.log("setup DB");
        //this.dropTables();
        //3MB DB size
        persistence.store.websql.config(persistence, 'items1',
            'Item DB', 3 * 1024 * 1024);
        persistence.debug = true;
        //id ist automatisch generiert!
        this.Item = persistence.define('Item', {
            imageUrl: "TEXT",
            title: "TEXT",
            lat: "INT",
            long: "INT",
            state: "TEXT"
        });
        //TODO: delete DB for testing
        //persistence.reset(function(){
        persistence.schemaSync(function(){

        });
    }

    this.dropTables = function ()
    {
        persistence.reset(function() {
            console.log("Reset!");
        });
    }

    this.getItemByItemID = function(itemID)
    {
        console.log("getItemByItemID, ID:" + itemID);
        this.Item.load( itemID, function(myitem) {
            if(typeof myitem === "undefined")
            {
                console.warn("Item not found in DB")
            }
            else
            {
                logItem(myitem);
            }
        });
    }

    this.getAllItemsInDb = function ()
    {
        return this.Item.all();

    }
    this.deleteItem = function(item)
    {
        console.log("deleteItem");
        console.log(item);
        logItem(item);
        persistence.remove(item);
        persistence.flush();

    }

    this.showAllItemsInDb = function ()
    {
        console.log("Items in DB");
        var allItems = this.Item.all();
        allItems.list(null, function (results) {
            results.forEach(function (r) {

                logItem(r);
            });
        });
    }

    this.saveItem = function(myItem)
    {
        console.log("saveItem");
        logItem(myItem);
        persistence.add(myItem);
        persistence.flush();
    }
}

logItem =  function(item)
{
    console.log(itemToString(item));
}
itemToString = function(item)
{
    if(item.id  != null)
    {
        myItemId = item.id;
    }
    return myItemId + " " +item.title() + " " +item.imageUrl() + " " + item.lat() + " " + item.long() + " " + item.state();
}