如果使用 TypeScript 的数组中已经存在键值，如何通过 onclick 增加键值？答案

【问题标题】：How to increment the key value by onclick if already the key value present in the array using TypeScript?如果使用 TypeScript 的数组中已经存在键值，如何通过 onclick 增加键值？
【发布时间】：2020-11-30 17:38:30
【问题描述】：

这里我有 onclick 函数，它可以从 detailss 数组中获取 Product_id、Product_name 和 Price。我正在使用本地存储数组愿望清单存储这个值。

现在我被困在更新本地存储阵列愿望清单中的数量，如果 productid 已经存在于本地存储中，我需要添加数量。

addToCart(Product_id){
    
    var name=[{
        Product_id:this.detailss[0].Product_id,
        Product_name:this.detailss[0].Product_name,
        Price:this.detailss[0].Price,
        Quantity:"",
        
    }];

var a = JSON.parse(localStorage.getItem('wishlist')) || [];
a.push(name);
localStorage.setItem('wishlist', JSON.stringify(a));
console.log(Product_id);

}

提前致谢。

【问题讨论】：

标签： angular ionic-framework typescript1.8

【解决方案1】：

从 localStorage 中获取值并将其解析为 Object

var myList = JSON.parse(localStorage.getItem('wishlist')) || [];

使用 Product_id 查找产品

addQuantity(Product_id,passedQuantity) {

  let productIndex=myList.findIndex(eachProduct=> eachProduct.Product_id==Product_id);
  if(productIndex==-1)
  {
  //Product does not exist in the array
  }
  else
  {
  myList[productIndex].Quantity=passedQuantity;
  }
}

再次对数组进行字符串化并将其保存回 localStorage

localStorage.setItem('wishlist', JSON.stringify(myList));

【讨论】：

我试过这段代码，但这并没有增加我的数量......

【解决方案2】：

仅在项目存在时添加金额的功能。

在此示例中，通过单击购物车内的 + 按钮添加金额：

addAmount(Product_id){
    let myArray = JSON.parse(localStorage.getItem('wishlist'));
        for(let i = 0; i < myArray.length; i++){
           if(Product_id == myArray[i].Product_id){
               myArray[i].Quantity = parseInt(myArray[i].Quantity) + 1;
               localStorage.setItem('wishlist', JSON.stringify(myArray));
           }
    }
 }

如果你想传递一个数字：

 addAmount(Product_id, Quantity){
        let myArray= JSON.parse(localStorage.getItem('wishlist'));
            for(let i = 0; i < myArray.length; i++){
               if(Product_id == myArray[i].Product_id){
                   myArray[i].Quantity = Quantity;
                   localStorage.setItem('wishlist', JSON.stringify(myArray));
               }
        }
     }

附：对于此类数据，最好使用 Storage 而不是 localStorage。

在原生应用上下文中运行时，存储将优先使用 SQLite，因为它是最稳定和广泛使用的基于文件的数据库，并避免像 localstorage 这样的一些陷阱和 IndexedDB，例如操作系统决定以低速清除此类数据磁盘空间情况。

import { Storage } from '@ionic/storage';
...
constructor(public _storage: Storage){}
...
this._storage.get('wishlist').then((res) => {
     for(let i = 0; i < res.length; i++){
         if(Product_id == res[i].Product_id){
            res[i].Quantity = parseInt(res[i].Quantity) + 1;
            //res[i].Quantity = Quantity;
            this._storage.set('wishlist', res).then(()=>
                console.log(res)
            );
         }
     }
})

【讨论】：

【解决方案3】：

这不是localStorage 的用途......请尝试使用webStorage。 https://www.w3schools.com/html/html5_webstorage.asp

【讨论】：