Offlinefähige Webseite Teil 2: Lokaler Speicher

Nachdem im Blog Teil 1 das grundlegende responsive Layout für die offlinefähige Webanwendung mit Twitter Bootstrap erstellt wurde geht es in Teil 2 und Teil 3 um die offline Funktionalität von HTML5.

Der gesamte Sourcecode für die Webanwendung ist auch auf Githup zu finden.

Nähere Informationen zu lokalem Speicher und offlinefähigkeit in HTML5 können Sie in diesem Blogbeitrag nachlesen. Es muss nun zunächst das HTML Grundgerüst angepasst, und das localStorage Objekt eingebaut werden.

Im Bereich ‘Erfassung der Kennzeichen’ muss, der Inputtype von submit auf button geändert werden, damit das Formular nicht bei jedem Buttonklick abgesendet wird:

<button id="btnSave" class="btn btn-success" type="button">

<span class="glyphicon glyphicon-plus"></span></button>

In einem nächsten Schritt muss die Tabellenausgabe der Kennzeichenliste so angepasst werden, dass sie anschließend mittels JavaScript dynamisch befüllt werden kann.

<!-- Listendarstellung der Kennzeichen --><div class="container-fluid"><h3>Fahrzeugliste</h3><div class="table-responsive"><table id="tblKennzeichen" class="table table-striped"><thead><tr><th>#</th><th>Kennzeichen</th></tr></thead><tbody></tbody></table></div></div>

Werfen wir nun einen Blick auf die Datei script.js, welche die eigentliche Funktionalität unserer Anwendung bereitstellt.

Interessant ist hier vor allem das dynamische Befüllen der Tabelle mittels JQuery.

// Keine Werte gespeichert anzeigen 
function drawNoData() { 
    $('#tblKennzeichen tbody').html(''); 
    $('#tblKennzeichen tbody').append('<tr><td>0</td><td>Keine Autos gespeichert</td></tr>'); 
} 

// Zeichne Tabellenzeilen 
function drawRows(data) { 
    var obj = jQuery.parseJSON(data); 

    $('#tblKennzeichen tbody').html(''); 

    $.each(obj, function (key, value) { 
        key = key + 1; 
        $('#tblKennzeichen tbody').append('<tr><td>' + key + '</td><td>' + value + '</td></tr>'); 
    }); 
}

Ein lauffähiges Demo finden Sie unter diesem Link. Viel Spass mit Tutorial Teil 3. Hier wird das noch ausständige Cache Manifest mit Visual Studio 2013 besprochen.