如何在本地存储中存储多个 Json 对象数据以及如果存在如何更新它

Question

在我的 angular 项目中有一个购物车功能。 Soi 需要任何人的帮助。

1。如何检查用户之前添加到购物车（通过将本地存储中的现有产品 ID 与新选择的产品 ID 匹配）、现在选择的产品。

2。如果以前添加到购物车，如何更新它（新数量或新类型到现有产品 ID 下）。

3。如果之前没有添加，如何在新的Product ID下作为新产品推送到本地存储。不能影响其他选定的购物车产品

Angular 7 cli

Product.components.ts

constructor(private cartService:CartServicesService)

public addToCart(productId : any , productTypeStatus:any , quantityCount:any ){ 

var cartProductData = { 
  "productId": productId,
  "productSelectedTypeId": productTypeStatus,
  "productQuantity": quantityCount
};  

this.cartService.addToCart(cartProductData); //send data to cart-service.ts

}

购物车-services.service.ts

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class CartServicesService {

constructor() { }

public addToCart(cartData:any) {

 console.log(cartData);

 //save data in local storage------------------------------------
 localStorage.setItem('cartObject', JSON.stringify(cartData)); 

 }
}

在本地存储

Key   : cartObject
Value : {"productId":3,"productSelectedTypeId":null,"productQuantity":4}

Answer 1

嗯，您在问题中提到的步骤通常是正确的。但是，我建议您将它存储为一个对象数组，而不是一个单独的对象。

这是您从 localStorage 获取购物车数据的方法。

let cart =  JSON.parse(localStorage.getItem('cartObject'));

然后，我们使用 Array.some() 检查您购物清单上的新商品是否存在于来自 cartObject 的购物车中。

let isInCart = false;
if (cart) {
  isInCart = cart.some(item => item.productId === 
cartProductData.productId));
} else {
  cart = [];
}

然后，我们根据isInCart来处理它，这是一个布尔值，表示该商品是否存在于购物车中：

if (isInCart) {
  cart.map(item => {
    if (item.productId === cartProductData.productId) {
      item.productQuantity += cartProductData.productQuantity;
    }
    return item;
  });
} else {
  cart.push(cartProductData);
}

然后，我们将更新后的 cart 存储在您的本地存储中：

localStorage.setItem('cartObject', JSON.stringify(cart));

Answer 2

localStorage 将值存储在键值对中。

1) 使密钥对用户唯一并存储他们的产品。

2) 如果有多个产品存储为用户键作为值的购物车对象数组。

3) 如果要更新值列表中的单个产品，从存储中检索列表修改其中所需的值，替换存储中的列表。（因为它的映射，添加另一对具有相同键的键将 replace/overwrite 该键的现有值）。

4) 如果要更新整个列表，只需替换用户键的值即可。

如何在本地存储中存储多个 Json 对象数据以及如果存在如何更新它

How to store multiple Json object data in local storage & if existing how to update it

angular

typescript

angular7

cart

shopping-cart