html 5 web storage

**ceerup** · 04-30-2012, 07:07 AM

im making an app for android and iOS and i want the user that entered statistics in the app save it so when they exit the app and come back, their statistics are still there, how can i achieve this?

**jscheuer1** · 04-30-2012, 09:57 AM

Using localStorage is a little tricky because the page must be live. Other than that, it's quite simple. Here's a link to a demo page on localStorage by one of the maintainers of the HTML 5 standards:

http://people.w3.org/mike/localstorage.html

Looking at its source code (here corrected to work in IE browsers version 7 and up that support localStorage**):

Code:

<!DOCTYPE HTML>
<html>
 <head>
  <title>HTML5 localStorage (name/value item pairs) demo</title>
  <style >
    td, th {
      font-family: monospace;
      padding: 4px;
      background-color: #ccc;
    }
    #hoge {
      border: 1px dotted blue;
      padding: 6px;
      background-color: #ccc;
      margin-right: 50%;
    }
    #items_table {
      border: 1px dotted blue;
      padding: 6px;
      margin-top: 12px;
      margin-right: 50%;
    }
    #items_table h2 {
      font-size: 18px;
      margin-top: 0px;
      font-family: sans-serif;
    }
    label {
      vertical-align: top;
    }
  </style>
 </head>
 <body onload="doShowAll(); setTimeout(doShowAll, 3000);">
  <h1>HTML5 localStorage (name/value item pairs) demo</h1>

  <form name=editor>

    <div id="hoge">
     <p>
     <label>Value: <textarea name=data cols=41 rows=10></textarea></label>
     </p>

     <p>
      <label>Name: <input name=name></label>
      <input type=button value="getItem()" onclick="doGetItem()">
      <input type=button value="setItem()" onclick="doSetItem()">
      <input type=button value="removeItem()" onclick="doRemoveItem()">
     </p>
   </div>

   <div id="items_table">
     <h2>Items</h2>
<div id=pairs>
</div>
     <p>
     <label><input type=button value="clear()" onclick="doClear()"> <i>* clear() removes all items</i></label>
     </p>
   </div>


   <script>

     function doSetItem() {
       var name = document.forms.editor.name.value;
       var data = document.forms.editor.data.value;
       localStorage.setItem(name, data);
       doShowAll();
     }

     function doGetItem() {
       var name = document.forms.editor.name.value;
       document.forms.editor.data.value = localStorage.getItem(name);
       doShowAll();
     }

     function doRemoveItem() {
       var name = document.forms.editor.name.value;
       document.forms.editor.data.value = localStorage.removeItem(name);
       doShowAll();
     }

     function doClear() {
       localStorage.clear();
       doShowAll();
     }

     function doShowAll() {
       var key = "";
       var pairs = "<table><tr><th>Name</th><th>Value</th></tr>\n";
       var i=0;
       for (i=0; i<=localStorage.length-1; i++) {
         key = localStorage.key(i);
         pairs += "<tr><td>"+key+"</td>\n<td>"+localStorage.getItem(key)+"</td></tr>\n";
       }
       if (pairs == "<table><tr><th>Name</th><th>Value</th></tr>\n") {
         pairs += "<tr><td><i>empty</i></td>\n<td><i>empty</i></td></tr>\n";
       }
	pairs += '</table>';
       document.getElementById('pairs').innerHTML = pairs;
     }

   </script>

  </form>

 </body>
</html>

should show you all you need to know to to store and retrieve values.

** The code for localStorage is the same as the original, what's corrected is how the Items section at the bottom is written to the page. IE (up to and including IE 9) has yet to adopt the HTML 5 standard of allowing an empty table.

**ceerup** · 05-01-2012, 06:53 PM

thank you, it looks kind of simple, but what doesnt right? lol

Thread: html 5 web storage

Thread Tools

Search Thread

html 5 web storage

Bookmarks

Bookmarks

Posting Permissions