从本地存储中的对象中删除数组项 - Ionic App答案

【问题标题】：Delete array items from object in localstorage - Ionic App从本地存储中的对象中删除数组项 - Ionic App
【发布时间】：2020-12-31 06:39:37
【问题描述】：

我有一个Ionic 应用程序，我将数据存储在localStorage 中。要求是我想从基于用户click 的localStorage 对象的数组中删除一些项目。

我有以下代码，但不知何故无法正常工作。请建议我在哪里做错了。

home.html:

<ng-container *ngFor="let item of items[0]">
    <ion-item no-lines class="items" *ngIf='this.items!= 0' (click)="deletereminder(item)">
        <ion-row>
            <ion-col>
                <h3 ion-text class="items">
                    Reminder {{item [0] + 1}}
                </h3>
            </ion-col>
            <ion-col>
                <h3 ion-text class="items">
                    {{item [1] | date:'medium'}}
                </h3>
            </ion-col>
            <ion-col style="text-align: right;">
                <h3 ion-text class="itemdelete">
                    <ion-icon name="trash"></ion-icon>
                </h3>
            </ion-col>
        </ion-row>
    </ion-item>
</ng-container>

home.ts：

 deletereminder(item){
    var newObj = JSON.parse(localStorage.getItem('Data'));
    console.log("index to delete",item);
    newObj.data.splice(item, 1)
    localStorage.setItem('Data', JSON.stringify(newObj));
  }

我的localStorage 看起来像这样：

Key   : Data
Value : {"data":[[0,"1600074900000"],[1,"1600679760000"]]}

问题是上面的home.ts 正在删除完整的array 而不是点击的项目。

函数(click)="deletereminder(item)" 返回要删除的正确项目。例如，如果我单击任何项目0,"1600074900000"，它将返回0,"1600074900000"。我已经检查了 console.log(item)。

但它不会删除我正在选择的项目。相反，它正在从数组顶部删除项目。例如，如果数组有 3 条记录，则从上到下删除记录。而且当它到达最后一条记录时，它不会删除最后一条记录。

【问题讨论】：

您能否同时发布item 和您在本地存储中设置的数组/对象，以便我们有更好的想法来玩。
您的 UI 与您的代码看起来如何，您可以发布图片吗？

标签： angular typescript ionic-framework local-storage

【解决方案1】：

您必须update localStorage 中的值。 removeItem() 只能从 localStorage 中按键删除一个项目。所以不要删除密钥，只需使用新的 Data 密钥再次设置它：

const newObj = localStorage.getItem("Data")
从object 中删除index
localStorage.setItem("Data", newObj )

当您想将对象存储在localStorage 上时，最好像这样使用JSON.stringfy：

localStorage.setItem('Data', JSON.stringify( {"data":[[0,"1600074900000"],[1,"1600679760000"]]}));

因此，当您想要获取对象并对其进行修改时，您可以执行以下操作：

let DataObj = JSON.parse(localStorage.getItem('Data'));

因此，如果您在 home.ts 中使用 JSON.strinigfy() 进行存储，请尝试以下操作：

home.ts

deletereminder(item){
  let newObj = JSON.parse(localStorage.getItem('Data'));
  newObj.data.forEach((element, index) => {
    if(element[0] == item) {
       newObj.data.splice(index, 1)
    }
  })
  localStorage.setItem('Data', JSON.stringify(newObj));
}

【讨论】：

我尝试了以下但不工作。拼接不工作。 const newObj = localStorage.getItem("rp_data") // Remove the index from object newObj.splice(index,1); localStorage.setItem("rp_data", newObj )
我为您的回答添加了一些要点。看那个。您必须使用JSON.stringify() 和JSON.parse() 之后您将拥有一个数据对象。从中取出数组，然后使用拼接。好吗？
我也为你添加了deletereminder() 功能。另外您模板中的*ngFor 不正确
我尝试了您的查询，但没有任何反应。我已经更新了deletereminder()，并提供了我在使用这个新功能时遇到的问题。
实际上if(element[0] == item) 总是错误的，因此不起作用。你能推荐吗？

【解决方案2】：

我已经用下面更新的代码得到了解决方案。

在 home.html 中，完成以下更新：

<ng-container *ngFor="let item of items[0];let index = index" >
    <ion-item no-lines  class="items"  *ngIf='this.allObj1 != 0' (click)="deletereminder(index)">

在 home.ts 中，完成以下更新：

deletereminder(index){
    var newObj = JSON.parse(localStorage.getItem('Data'));
    var indextodelete = index;
    newObj.data.splice(indextodelete, 1)
    localStorage.setItem('Data', JSON.stringify(newObj));
    }

【讨论】：