docs(demos): update local storage demo

references driftyco/ionic-site#397

demos/local-storage/index.ts

@@ -3,26 +3,58 @@ import {Storage, LocalStorage} from 'ionic/ionic';
 
 
 @App({
-  templateUrl: 'main.html'
+  template: '<ion-nav [root]="root"></ion-nav>'
 })
 class ApiDemoApp {
+  constructor() {
+    this.root = MainPage;
+  }
+}
+
+@Page({
+  templateUrl: 'main.html'
+})
+class MainPage {
   constructor() {
     this.local = new Storage(LocalStorage);
-    this.myItem = {};
-    this.delKey = '';
     this.localStorageDemo = '{}';
     window.localStorage.clear();
+
+    this.myItem = {
+      key: 'username',
+      value: 'admin'
+    };
+
+    this.keys = ['username', 'name', 'email', 'address'];
+    this.values = ['admin', 'Administrator', 'admin@administrator.com', '123 Admin St'];
+    this.addedKeys = [];
   }
 
   set() {
-    this.local.set(this.myItem.key, this.myItem.value );
-    this.localStorageDemo = JSON.stringify(window.localStorage, null, 2);
-    this.myItem = {};
+    if (this.myItem.key) {
+      let added = false;
+
+      for (let i = 0; i < this.addedKeys.length; i++) {
+        if (this.addedKeys[i] == this.myItem.key) added = true;
+      }
+
+      if (added == false) {
+        console.log("Adding key", this.myItem.key);
+        this.addedKeys.push(this.myItem.key);
+        this.delKey = this.myItem.key;
+        this.local.set(this.myItem.key, this.myItem.value );
+        this.localStorageDemo = JSON.stringify(window.localStorage, null, 2);
+      }
+    }
   }
 
   remove() {
     this.local.remove(this.delKey);
     this.localStorageDemo = JSON.stringify(window.localStorage, null, 2);
-    this.delKey = '';
+
+    let index = this.addedKeys.indexOf(this.delKey);
+    if (index > -1) {
+      this.addedKeys.splice(index, 1);
+    }
   }
 }

demos/local-storage/main.html

@@ -10,12 +10,20 @@
 
     <ion-item>
       <ion-label>Key</ion-label>
-      <ion-input type="text" placeholder="Enter a key" [(ngModel)]="myItem.key"></ion-input>
+      <ion-select [(ngModel)]="myItem.key">
+        <ion-option *ngFor="#key of keys" [value]="key">
+          {{ key }}
+        </ion-option>
+      </ion-select>
     </ion-item>
 
     <ion-item>
       <ion-label>Value</ion-label>
-      <ion-input type="text" placeholder="Enter a Value" [(ngModel)]="myItem.value"></ion-input>
+      <ion-select [(ngModel)]="myItem.value">
+        <ion-option *ngFor="#value of values" [value]="value">
+          {{ value }}
+        </ion-option>
+      </ion-select>
     </ion-item>
 
   </ion-list>
@@ -32,7 +40,12 @@
 
     <ion-item>
       <ion-label>Key</ion-label>
-      <ion-input type="text" placeholder="Enter a Key" [(ngModel)]="delKey"></ion-input>
+      <ion-select [(ngModel)]="delKey">
+        <ion-option checked>Select a Key</ion-option>
+        <ion-option *ngFor="#key of addedKeys" [value]="key">
+          {{ key }}
+        </ion-option>
+      </ion-select>
     </ion-item>
   </ion-list>
 
@@ -48,7 +61,3 @@
     <pre>local: {{ localStorageDemo }}</pre>
   </div>
 </ion-content>
-
-<style>
-
-</style>