Angular 2 - 从 localStorage 存储和获取对象数组

Question

我想在 localStorage 中存储一个对象数组。

这是我在组件阶段存储对象数组的代码片段。

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 => {

这是试图在另一个组件中取回它的代码。

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

这是我的模型class

export class EcomService {

  public eseCode: number;
  public eseLabel: string;

}

Answer 1

在本地存储中存储类似这样的东西

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

回来的时候做这样的事情。

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

Answer 2

Prathmesh 的回答的问题是，如果密钥 'services_assigned' 在 localStorage 中不存在，您将得到一个错误。

所以获取数组的最佳方式是：

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

请注意如果 getItem returns null 是如何提供默认值（空数组）的，因为我们从未将我们的服务存储在那里。

存储数组：

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

Answer 3

在我的项目中，我只是创建了与 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();
    }
}

Angular 2 - 从 localStorage 存储和获取对象数组

Angular 2 - Storing and Getting Objects array from localStorage

angular-local-storage

angular