标签: angular-local-storage

我发现自己将我的api调用中的所有数据都放在设备本地存储中,我不确定是否将东西放在本地存储中并将它们放入服务中是否重要.我应该何时使用设备中的本地存储与使用Angularjs服务？

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

这是我的模特课

export class EcomService {

  public eseCode: number;
  public eseLabel: string;

}

在此先感谢您的帮助.我试图通过打字稿获取Angular 2中的本地存储访问.我正在使用npm包angular2-localstorage.我有angular.io"英雄之旅"的工作(没有太多的造型).我按照https://www.npmjs.com/package/angular2-localstorage上的说明进行操作.将建议的代码添加到我的app.module.ts文件后,我尝试运行npm start,并获得以下编译错误:

node_modules/angular2-localstorage/LocalStorageEmitter.ts(46,9): error TS2305: Module '"/Users/joshuaforman/Documents/CodeCraft/a2quickstart/a2-angular/node_modules/@angular/core/src/facade/lang"' has no exported member 'Type'.
node_modules/angular2-localstorage/LocalStorageEmitter.ts(47,9): error TS2305: Module '"/Users/joshuaforman/Documents/CodeCraft/a2quickstart/a2-angular/node_modules/@angular/core/src/di"' has no exported member 'provide'.

您可以在此处查看所有代码:https://github.com/joshuaforman/angular2-quickstart

另外,这里是完整的app.module.ts文件(我改变的唯一一个导致错误发生的文件):

import { NgModule }       from "@angular/core";
import { BrowserModule }  from "@angular/platform-browser";
import { FormsModule }    from "@angular/forms";
import { HttpModule }    from "@angular/http";

// added for LocalStorage
// followed instructions here: https://www.npmjs.com/package/angular2-localstorage
import { LocalStorageService, LocalStorageSubscriber } from "angular2-localstorage/LocalStorageEmitter";

// Imports for loading & configuring the in-memory …

我在Cordova应用程序中使用localForage.

我想知道localforage的大小.基本上它被称为5mb限制.我的移动应用程序中将有超过100mb的数据.

var DefaultConfig = {
    description: '',
    driver: DefaultDriverOrder.slice(),
    name: 'localforage',
    // Default DB size is _JUST UNDER_ 5MB, as it's the highest size
    // we can use without a prompt.
    size: 4980736,
    storeName: 'keyvaluepairs',
    version: 1.0
};

大小是4980736字节,这是4.9MB ..如果我增加到100mb,它支持吗？

我有此方法可通过localstorage获取令牌，如果令牌不存在或已过期，我将调用API获取另一个令牌并将其存储到localstorage。

在这种情况下，我应该使用哪个地图，当前是否使用mergeMap或其他方式执行此操作？

public doGetToken():Observable<Token> {
    return this.loadToken().pipe( //get via localstorage
      map(token=>{
        let valid = this.validateTokenIsValid(token);
        let data = {
          token: token,
          valid: valid
        };
        return data;
      }),
      mergeMap(data=>{
        if (!data.valid) {
          return this.doApiGetToken(data.token).pipe(
            map(
              token=>{
                this.saveToken(token); //save to localstorage
                return token;
              }
            )
          );
        } else {
          return of(data.token);
        }
      })
    );

版本：Angular 5，rxjs5

先感谢您。

当我尝试获取本地存储记录时，它给出以下错误。

"Argument of type 'string | null' is not assignable to parameter of type 'string'.\n  Type 'null' is not assignable to type 'string'.",

这是代码

this.service.getAllPets(this.CatDog).subscribe(
  data => {
    this.pets = data;
    console.log(data);
    // tslint:disable-next-line:no-bitwise
    const newPet = JSON.parse(localStorage.getItem('newPet'));
    if (newPet){
      this.pets = [newPet, ...this.pets];
    }
    console.log(this.route.snapshot.url.toString());
  }, error => {
    console.log('httperror:');
    console.log(error);
  }
);