Angular 2 - Storing and Getting Objects array from localStorage

Question

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;

}

my code can't hold and array of objects in localStorage and gets it back from another component. — Soufiane Rabii
– Soufiane Rabii, Commented Jul 20, 2017 at 10:54

Matt Rowles · Accepted Answer · 2018-03-27 03:36:03Z

16

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'));

edited Mar 27, 2018 at 3:36

Matt Rowles

8,16021 gold badges58 silver badges89 bronze badges

answered Jul 20, 2017 at 10:46

Prathmesh Dali

2,3601 gold badge20 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Simply Ged · Accepted Answer · 2019-10-27 22:41:36Z

4

The problem with the answer from Prathmesh is that if the key 'services_assigned' doesn't exist in localStorage you will get an error.

So the best way to get the array is:

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

Note how that provides a default (empty array) if getItem returns null because we've never stored our services there.

To store the array:

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

edited Oct 27, 2019 at 22:41

Simply Ged

8,72311 gold badges37 silver badges41 bronze badges

answered Oct 27, 2019 at 22:21

Leandro Q

2212 silver badges3 bronze badges

1 Comment

Surya R Praveen Over a year ago

If storage doesn't have the value, it will throw error. Good that we have provided an empty array if getItem returns null. Thanks...

iliya.rudberg · Accepted Answer · 2019-10-27 22:50:18Z

0

In my project i have just simply create storage service to work with localStorage:

@Injectable()
export class CacheService {

    constructor() {}

    public get(key) {
        const data = localStorage.getItem(key);
        return !_.isEmpty(data) ? _.cloneDeep(JSON.parse(data)) : [];
    }

    public set(data, key) {
        localStorage.setItem(key, JSON.stringify(data));
    }

    public reset() {
        localStorage.clear();
    }
}

answered Oct 27, 2019 at 22:50

iliya.rudberg

78912 silver badges24 bronze badges

Collectives™ on Stack Overflow

Angular 2 - Storing and Getting Objects array from localStorage

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related