Loop localstorage and display complete list of all key and value in ionic app

Issue

I have saved multiple keys and value in localStorage as below:

Day1  1
Day2  2
Day3  3

I want to retrieve all the keys and values and display them in a list view.

My home.html looks like below:

<ion-item-divider >
<ion-label >{{key}} </ion-label>
<ion-label color="secondary">{{value}}</ion-label>    
</ion-item-divider>

My home.ts looks like below:

for (var i = 0, len = localStorage.length; i < len; i++) {
      this.key = localStorage.key(i);
      console.log(this.key);
      this.value = localStorage.getItem(localStorage.key(i));
      console.log(this.value);
    }

I am able to display only the last record. Please suggest where i am doing wrong.

Solution

I am able to resolve the issue using follow query.

home.ts is as below:

allObj: any[] = [];
for ( var i = 0, len = localStorage.length; i < len; ++i ) {
      this.result1 = localStorage.key( i );
      this.result2 = localStorage.getItem( localStorage.key( i ) );
      this.result3 = this.result1 + " " + this.result2;
      var y = this.result3;
      console.log(y);
      this.allObj.push(this.result3);
    }

home.html is as below:

<ion-item no-lines text-wrap *ngFor="let item of allObj" >
<p>{{item}}</p>
</ion-item>

Answered By - Bongaigaon Gapps