HTML5 IndexedDB Features Examples

HTML

<script src="https://rawgithub.com/jashkenas/underscore/1.5.1/underscore-min.js"></script>
<script src="https://rawgithub.com/postaljs/monologue.js/master/lib/monologue.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0-rc1/css/bootstrap.min.css">
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0-rc1/js/bootstrap.min.js"></script>
<script src="https://rawgithub.com/postaljs/postal.js/master/lib/postal.min.js"></script>
<script src="https://rawgithub.com/postaljs/monopost.js/master/lib/monopost.min.js"></script>
<script src="https://rawgithub.com/postaljs/postal.diagnostics/master/lib/postal.diagnostics.min.js"></script>
<script src="https://rawgithub.com/ifandelse/37dd214aaa582a77f1b0/raw/c1c5d40183fb15308a921c1f5207e83f8a9cc9f8/IndexedDB_Sillyness.js"></script>
<script type="text/underscore-template" id="pref-template">
    <tr><td><%=fullName %></td><td><%=bandName %></td></tr>
</script>
<ul class="nav nav-tabs" id="ze-tabs">
    <li class="active">
        <a href="#addPrefs" data-toggle="tab">Add Preferences</a>
    </li>
    <li id="filterOption">
        <a href="#filter" data-toggle="tab">Filter Preferences</a>
    </li>
</ul>
<div class="tab-content">
    <div class="tab-pane active well" id="addPrefs">
        <form class="form-inline" id="prefForm">
            <fieldset>
                <input class="form-control" type="text" id="fullName" placeholder="Your Name" />
                <input class="form-control" type="text" id="bandName" placeholder="Band You Like" />
                <button class="btn btn-default" id="addPref">Add</button>
                <input type="reset" class="btn btn-default" value="Reset" />
            </fieldset>
        </form>
    </div>
    <div class="tab-pane well" id="filter">
        <form class="form-inline" id="filterForm">
            <fieldset>
                <label for="filterName">Show Prefs For:</label>
                <select id="filterName"...

CSS

#prefList {
    margin-top:2em;
    width:30em;
}
input[type="text"] {
    width: 12.5em;
}
#filterName {
    width: 13.5em;
}

JavaScript

if(typeof indexedDB === "undefined") {
    $("body").html("<h2>Aw, shucks.<br/>Your browser doesn't support IndexedDB</h2>");
} else {
    // because if you get an error, it's all my fault.
    var jimIsAnIdiot = function (e) {
        alert("OHSNAP, there was a problem. Why is this Jim guy even coding?!");
    };
    
    // light wrapper around IndexedDB specific to this example
    // the bus arg is postal.js (a message bus) and Monologue is
    // an event emitter prototype.
    var storageAdapter = (function (bus, Monologue, $) {
        var version = 2; //cause I like arbitrary starting version #s
        var firstTime = false;
        var getIterator = function(container, prefs, topic) {
            return function (event) {
                var cursor = event.target.result;
                if (cursor) {
                    prefs.push({
                        fullName: cursor.value.fullName,
                        bandName: cursor.value.bandName
                    });
                    cursor.
                    continue ();
                } else {
                    container.emit(topic, prefs);
                }
            };
        };
        // the actual storage adapter instance that will be returned
        // from this module
        var module = $.extend({
            db: undefined,
            // helper method that handles opening our database and, 
            // if necessary, creating the object store, index and
            // populating with some initial seed data.
            init: function () {
                // open our DB and create object stores if it's the
                // first time this DB has been created on this client
                var self = this;
                var request = indexedDB.open("BandPrefs", version);
                request.onerror = jimIsAnIdiot;
                request.onsuccess = function (e) {
                    self.db = e.target.result;
                    if(firstTime) {
                       ...