How to localstorage get Data


I have below code in my .ts file

    		this.local = new Storage(LocalStorage);
    		this.local.set('name', name);

and in my .html file have below code

       <ion-input type="text" [(ngModel)]="name"></ion-input>

        <button (click)="setData(name)">Set data</button>
    	<button (click)="getData()">Get data</button>
    	<ion-list *ngIf="output">
    	  <ion-item *ngFor="#item of output" >

When I click on set data, its works fine. But when I click on getData.

it showing [object Object]. What is the method to read get data ?


What I do when saving it to local storage is stringify it.

this.local.set('name', JSON.stringify(name));

And then when getting it back I parse it.

this.output = JSON.parse(this.local.get('name'));

I hope this will solve your problem.


like dtaalbers said: Localstorage is a key-value string-based storage. You can only store strings. You need to convert it back to JSON if you want to work with localstorage values.


Hello Dear,

The Problem you are facing is not about JSON.stringify and all.

Ionic LocalStorage instance.get() return Promise < string > instead of direct data, so you need to use then to obtain your data like belowe code.

constructor() {
  this.local = new LocalStorage("info");
setData(name) {
  this.local.set('name', name);

getData() {
  this.local.get("name").then((output) => {

        <ion-label floating>Name</ion-label>
        <ion-input type="text" #txt></ion-input>
    <button light (click)="setData(txt.value)">Set</button>
    <button light (click)="getData()">Get</button>


May be a good idea for you to give a try on localForage, which is capable of storing objects directly if IndexedDB or WebSql are abailble (and fallbacks to localstorage+JSON.stringify when neither are available).

localForage’s API is asynchronous, as well as Ionic’s Storage’s one; you’ll need to use promises (or callbacks) as well. :slight_smile: