如何从 json.stringify 存储的会话中获取对象数组？

Question

我有课：

export class CartItem {  
  productname!: string;
  quantity!: number;
}

我在会话中将其存储为：

cartItems: Array<CartItem> = [];
...
...
sessionStorage.setItem("CurrentCart", JSON.stringify(this.cartItems));

检索此内容时，我尝试：

this.cartItems = JSON.parse(sessionStorage.getItem("CurrentCart") || '') as Array<CartItem>;

但这会返回：

Cart Items [object Object],[object Object],[object Object],[object Object]

而不是带有值的数组。

从我在一些示例中看到的Angular 将 json 转换为对象数组，似乎我需要将数组映射回来或编写自定义转换器https://medium.com/typescript-center/casting-json-objects- to-typescript-classes-a-deep-dive-835b8f8988bf

这是唯一的方法吗？对于较大的班级来说似乎效率低下且麻烦。

Answer 1

JSON.parse

不会将任意 json 转换为

CartItem

类。它只会将 json 字符串转换为 json 原语（字符串、布尔值、null、数组、对象）。

您需要实现一些自定义编码/解码。示例：

class CartItem {
  constructor(public productName: string, public quantity: number){}
  toJson(): any {
    return {productName: this.productName, quantity: this.quantity}
  }
  toString(): string{
    return `CartItem{${this.productName}:${this.quantity}}`
  }
  static fromJson(obj: any): CartItem {
    return new CartItem(obj.productName, obj.quantity)
  }
  static fromJsonList(obj: any): CartItem[] {
    return obj.map(item => CartItem.fromJson(item))
  }
}

class Cart {
  private cartItems: CartItem[] = []
  private static readonly STORE_KEY = "CurrentCart"
  function save(){
    const storedJson = JSON.stringify(this.cartItems.map(item => item.toJson()))
    sessionStorage.setItem(Cart.STORE_KEY, storedJson);
  }
  function load(){
    const storedJson = sessionStorage.getItem(Cart.STORE_KEY) || '[]'
    this.cartItems = CartItem.fromJsonList(JSON.parse(storedJson));
  }
}