Cordova Local Storage Example / Tutorial

    Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

    • Cordova Local Storage Example / Tutorial

      Wie speichert man Daten dauerhaft auf einem Gerät ab? Das möchte ich Euch heute erkären!

      Nicht immer kommt man ohne eine Speicherung von Daten an das Ziel. Wer möchte schon beim Start einer App jedes mal damit konfrontiert werden, seine Login-Daten einzugeben?

      Sowas frustet auf Dauer und trägt nicht zu einer angenehmen Usability bei. Um diesem Problem entgegen zu wirken kann man sich des Lokal Gerätespeichers (LocalStorage oder Local Storage) bedienen. Dieser speichert die Daten persistent auf dem Gerät ab. Das heißt nicht, dass diese Daten "unlöschbar" sind. Sie bleiben aber so lange erhalten, wie die App auf dem Gerät gespeichert ist. Mit dem Löschen der App verschwinden auch die im LocalStorage abgelegten Daten.


      Was ist der LocalStorage überhaupt und was kann ich dort speichern?
      LocalStorage ist besser bekannt unter dem Namen Web Storage. Man kann dort name/value pairs speichern. Ich könnte also im Code schreiben localStorage.username = username; und somit den Benutzernamen des Benutzers speichern.

      Ist der Gerätespeicher (Local Storage) die einzige Möglichkeit Daten zu speichern?
      Nein, der Gerätespeicher bietet mir nur eine von weiteren Möglichkeiten Daten abzulegen. Eine beliebte weitere Möglichkeit der Datenspeicherun ist eine [lexicon]WebSQL[/lexicon] Datenbank. Die [lexicon]WebSQL[/lexicon] Datenbank empfiehlt sich beispielsweise dann, wenn sowieso Daten mit dem Server ausgetauscht werden müssen. Hier kann direkt mit SQL Befehlen gearbeitet werden. Der Datenaustausch findet via Ajax und zum Beispiel jQuery statt.

      Eine sehr übersichtliche Darstellung der Speichermöglichkeiten findet ihr hier: HTML5Rocks - Storagemöglichkeiten mit HTML5


      Ein simples Anwendungsbeispiel für LocalStorage:
      index.[lexicon]html[/lexicon]

      HTML-Quellcode

      1. <!DOCTYPE html>
      2. <html>
      3. <head>
      4. <meta charset="utf-8" />
      5. <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, target-densitydpi=device-dpi" />
      6. <link rel="stylesheet" type="text/css" href="css/index.css" />
      7. <script type="text/javascript" src="cordova.js"></script>
      8. <title>Hello World</title>
      9. <script>
      10. function bar() {
      11. localStorage.item = 1;
      12. console.log(localStorage.item);
      13. }
      14. function barfoo() {
      15. localStorage.item = 0;
      16. console.log(localStorage.item);
      17. }
      18. function bar1() {
      19. localStorage['id'] = 1;
      20. console.log(localStorage['id']);
      21. }
      22. function barfoo1() {
      23. localStorage['id'] = 0;
      24. console.log(localStorage['id']);
      25. }
      26. </script>
      27. </head>
      28. <body>
      29. <div id="foobarContainer">
      30. <button id="foo" onclick="bar()">Set localStorage.item to 1</button><br>
      31. <button id="foobar" onclick="barfoo()">Set localStorage.item to 0</button>
      32. </div><!-- closing div of foobarContainer -->
      33. <div id="foobarContainer2">
      34. <button id="foo1" onclick="bar1()">Set localStorage['id'] to 1</button><br>
      35. <button id="foobar1" onclick="barfoo1()">Set localStorage['id'] to 0</button>
      36. </div><!-- closing div of foobarContainer -->
      37. </body>
      38. </html>
      Alles anzeigen


      index.[lexicon]css[/lexicon]

      Quellcode

      1. *{
      2. margin: 0;
      3. padding: 0;
      4. border: 0;
      5. }
      6. button{
      7. margin-left: 20%;
      8. margin-top: 20%;
      9. border: 1px solid green;
      10. background-color: lightgray;
      11. width: 50%;
      12. height: 50px;
      13. font-size: 12pt;
      14. }
      Alles anzeigen



      Um die Werte im LocalStorage auszulesen gibt es die Möglichkeit, sich das Programm GapDebug zu installieren. Dieses ist in der Lage Apps live zu bearbeiten und zu Debuggen und eben auch den Lokalen Gerätespeicher auszulesen.