Angular 2 - Storing and Getting Objects array from localStorage

Soufiane Rabii picture Soufiane Rabii · Jul 20, 2017 · Viewed 16.1k times · Source

I'd like to store an array of objects in localStorage.

This is snippet of my code storing the array of objects at component stage.

this._authenticationService.getProfilByLogin(this.form.value.j_username)
  .subscribe(result => {
     console.log('inside getting profils');
     console.log(result.json().ecomServices);
     localStorage.setItem('services_assigned', result.json().ecomServices);
  }, error => {

This is the code trying to get it back in another component.

import {Component, OnInit} from '@angular/core';
  import {EcomService} from "../../model/EcomService";

  @Component({
    selector: 'app-sidebar-nav',
    templateUrl: './sidebar-nav.component.html',
    styleUrls: ['./sidebar-nav.component.css']
  })
  export class SidebarNavComponent implements OnInit {


    public ecomServices: EcomService[] = [];

    constructor() {
    }

    ngOnInit() {
      this.ecomServices = localStorage.getItem('services_assigned');
    }
  }

This is my model class

export class EcomService {

  public eseCode: number;
  public eseLabel: string;

}

Answer

Prathmesh Dali picture Prathmesh Dali · Jul 20, 2017

While storing in local storage store something like this

localStorage.setItem('services_assigned', JSON.stringify(this.ecomServices));

While getting back do something like this.

this.ecomServices = JSON.parse(localStorage.getItem('services_assigned'));