在我的角度应用程序中获取本地存储项目无法正常工作答案

【问题标题】：Getting a local storage item not working properly in my angular app在我的角度应用程序中获取本地存储项目无法正常工作
【发布时间】：2018-04-18 15:39:52
【问题描述】：

我有一个 Angular 项目，其中有两个组件。一个导航栏组件和一个产品组件。他们都打电话给服务来买车。该服务在本地存储中存储了一个 cartId 变量，用于访问购物车。

在第二个组件中第二次调用 getOrCreateCartId 函数时，它似乎无法从 localstorage 读取项目。

服务如下：

import { ShoppingCart } from './models/shopping-cart';
import { Product } from './models/product';
import { AngularFireDatabase, FirebaseObjectObservable } from 'angularfire2/database';
import { Injectable } from '@angular/core';

import 'rxjs/add/operator/take';
import 'rxjs/add/operator/map';
import { Observable } from 'rxjs/Observable';

@Injectable()
export class ShoppingCartService {

  constructor(private db:AngularFireDatabase) { }

  private create(){
    return this.db.list('/shopping-carts').push({
      dateCreated:new Date().getTime()
    })
  }

  async getCart() : Promise<Observable<ShoppingCart>> {
    let cartId = await this.getOrCreateCartId();
    return this.db.object('/shopping-carts/'+cartId)
    .map(x=>new ShoppingCart(x.items));
  }

  private async getOrCreateCartId(): Promise<string> {
    let cartId = localStorage.getItem('cartId');
    if(cartId) return cartId;

    let result = await this.create();
    localStorage.setItem('cartId',result.key);
    return result.key;

  }

  private getItem(cartId:string, productId:string){
    return this.db.object('/shopping-carts/'+cartId+'/items/'+productId);
  }

  addToCart(product:Product){
    this.updateItemQuantity(product,1);
  }

  removeFromCart(product:Product){
    this.updateItemQuantity(product,-1);
  }    

  private async updateItemQuantity(product: Product, change: number) {
    let cartId = await this.getOrCreateCartId();
    let item$ = this.getItem(cartId, product.$key);
    item$.take(1).subscribe(item => {
      let quantity = (item.quantity || 0) + change;
      if (quantity === 0) item$.remove();
      else item$.update({ 
        title: product.title,
        imageUrl: product.imageUrl,
        price: product.price,
        quantity: quantity
      });
    });
  }

  async clearCart(){
    let cartId = await this.getOrCreateCartId();
    this.db.object('/shopping-carts/'+cartId+'/items').remove();
  }

}

我遇到的问题是导航栏第一次设置购物车对象（这是假设初始运行，浏览器在本地存储中还没有 cartId）那么当产品组件调用getCart()时，它似乎无法读取let cartId = localStorage.getItem('cartId'); 相反，它还创建了另一个购物车。

【问题讨论】：

您是否尝试过简单地设置断点并逐步查看发生了什么？
getOrCreateCartId 函数中的'localStorage.setItem('cartId',result.key)' 行之后，检查sessionStorage 的值，请放上来检查。请在控制台打印输出。

标签： angular

【解决方案1】：

你用 await 得到它，所以应用程序继续运行，然后当它承诺时，设置一张卡片，但在你的情况下，可能为时已晚，这就是它创建一张新卡片的原因。

【讨论】：

【解决方案2】：

localStorage.getItem('cartId') 返回一个String，既然你已经告诉你要存储一个对象，你需要将它解析为对象并访问对象的字段，如下所示，

 let cartId = JSON.parse(localStorage.getItem('cartId')).cardId;

【讨论】：

当我存储它时，它存储一个字符串。 localStorage.setItem('cartId',result.key); ... result.key 是一个字符串。