尝试将多个项目存储在存储中，但仅存储最后一个添加的项目

Question

我正在制作一个可以被视为购物车的应用。用户搜索产品，点击产品，然后可以选择将其添加到购物车中。 添加项目后，它们将返回到搜索页面。但是，如果他们返回搜索页面并搜索某些内容，它会在某种意义上刷新页面，因为发出了新的 HTTP 请求，并且如果他们选择了一个产品，单击添加，则只有最后一个产品在存储中可用。我相信它正在被覆盖。

当用户点击添加按钮时，additems.ts 中会调用 additems.ts 中的添加按钮，这会创建一个 newItem 对象并调用 addItem()，它假定将其推送到 items[] 数组并保存到存储中。

我做错了什么？

addItem.ts

items = [];

// params passed from another page 
name: string    = this.navParams.get('name');
desc: string    = this.navParams.get('desc');

// Called once users click on Add button in addItem.html
saveItem() {

  let newItem = {
    name: this.name,
    desc: this.desc
  };

  this.addItem(newItem);
}

addItem(item) {

  this.items.push(item);
  this.dataService.save(this.items);

  // Go back to search page. When the data is reloaded 
  // on this page it resets all of the items in storage 
  this.navCtrl.pop(Search);
}

addItem.html

<button (click)="saveItem()">Add</button>

数据服务.ts。

private storage: Storage;

constructor(storage: Storage) {
  this.storage = storage;
}

getData() {
  return this.storage.get('products');
}

save(data){
  let newData = JSON.stringify(data);
  this.storage.set('products', newData);
}

// viewProducts.ts（这是我要查看存储中所有当前产品的地方） 导出类 ConfirmOrderPage {

public items = [];

constructor(public navCtrl: NavController, public navParams: NavParams, public modalCtrl: ModalController, public dataService: DataStorage) {

   this.dataService.getData().then((products) => {
      if(products){
        this.items = JSON.parse(products);
        console.log("confirmorder", JSON.parse(products));
      }
    });
}

viewProducts.html

ion-list>
<ion-item text-wrap *ngFor="let item of items">
  <h2>Name: {{ item.name }}</h2>
  <h3>Product Quantity: 3 </h3>
  <p>{{ item.desc }}</p>
</ion-item>
</ion-list>

Answer 1

this.storage.set('products', newData);

以上代码将只为一个键保留一个值，如果您想在 products 键下添加更多项目，请考虑 newData 值作为数组。在将产品添加到本地存储之前，从本地存储中检索数据并将其设置在临时数组中，然后将新产品添加到该临时数组中并将其保存在本地存储中。现在 products 键将具有产品数组。

Answer 2

在您的 .ts 文件中，使用以下代码：

items = [];

// params passed from another page 
name: string    = this.navParams.get('name');
desc: string    = this.navParams.get('desc');

// Called once users click on Add button in addItem.html
saveItem() {

  let newItem = {
    name: this.name,
    desc: this.desc
  };

  this.dataService.save(newItem).then(()=>{
    this.navCtrl.pop(Search);
  });
}

并改变dataService.ts文件的save()方法如下：

save(data): Promise<any>{
  return this.getData().then((products: any[]) => {
    products.push(data);
    return this.storage.set('products', products);
  });
}

Answer 3

您不能在同一个键下存储多个项目。当您尝试在同一个键下存储多个项目时，最新的一个将覆盖前一个。

Answer 4

我知道这个问题已经写了一段时间了，但是我也遇到了类似的问题。与我对 mysql 或 sqlite 的预期不同，这些方法只添加一条记录......但是，我随后发现了其他一些非常棒的东西，但事实并非如此（来自下面链接中的代码）。 浏览器中的本地存储索引不允许您更改或创建新的索引值，而是您必须使用键，然后对值进行更改。

需要注意的是，该值可以放置数组值，然后您可以对其进行索引、创建、读取、更新和删除。

为了方便使用，而且不用我重写任何东西，我建议你看看 Simon 的回答 here from the Ionic Academy。