Question

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

我有以下代码，但不知为何。请提出我在哪里做错了。

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条记录，则它将从上到下删除记录。而且，当到达最后一条记录时，它不会删除最后一条记录。

Answer 1

您必须update中的值localStorage。 removeItem()仅通过密钥从localStorage删除项目。因此，与其删除密钥，不如使用新的 Data 密钥再次设置它：

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

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

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

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

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

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

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));
}

Answer 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));
    }

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

2 个答案: