Offline Webapp Teil 2: Lokaler Speicher

Nachdem wir im Blog Teil 1 das grundlegende responsive Layout für die offlinefähige Webanwendung mit Twitter Bootstrap erstellt haben, 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 Github 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.

 

html5 offline lokaler speicher

 

Im Bereich ‘Erfassung der Kennzeichen’ müssen wir den Inputtype von submit auf button ändern, 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, den Sourcecode können Sie von Github beziehen. Viel Spass mit Tutorial Teil 3. Hier wird das noch ausstehende Cache-Manifest mit Visual Studio 2013 besprochen.

Kommentare sind geschlossen