本地存储角度中的覆盖问题

Question

我的项目有问题，当我按下“添加到收藏夹”按钮时，我试图在 localStorage 中添加不同的食谱，但如果我单击 3 个不同的食谱，它们会覆盖在 localStorage 中，而不是添加其中的每一个。如果有人可以有一点时间，我想在这里得到一些帮助。非常感谢

recipe.ts。 - 我这里有我后端的食谱，我获取它们并尝试将它们添加到 localStorage

ngOnInit() {
    this.getDataFromApi();
  }

  getDataFromApi() {
    this.service.getData().subscribe(
      (response) => {
        console.log('Response from API is', response);
        this.data = response;
      },
      (error) => {
        console.log('Error is', error);
      }
    );
  }

add(i: any) {
    localStorage.setItem('Recipe', JSON.stringify(this.data[i]));
    console.log('Added in localstorage' + i);

    if (localStorage.getItem('Recipe') === null) {
      alert('TEST');
    }
  }

  remove() {
    localStorage.removeItem('Recipe');
    console.log('I deleted from localStorage');
  }

HTML

<div *ngFor="let recipe of data; let i = index">
      <p>
        {{ recipe.title }}
      </p>
      <img src="{{ recipe.image }}" alt="" />
      <p>{{ recipe.description }}</p>
      <p>{{ recipe.calories }}</p>
      <p>{{ recipe.cookingTime }}</p>
      <p>{{ recipe._id }}</p>
      <button (click)="add(i)">Add to favorite</button>
      <button (click)="remove()">Remove from favorite</button>
    </div>

现在，如果我按添加到收藏夹，我可以在 localStorage 中看到食谱，但如果我按另一个添加到收藏夹，则现有的食谱会被新的食谱覆盖。如何解决将它们全部放在 localStorage 中而不被覆盖的问题？非常感谢

Answer 1

localStorage 只是一个简单的键值存储，每次调用localStorage.setItem('Recipe', ...) 时都会为键“Recipe”分配一个新值，类似于变量赋值。 如果您想在 localStorage 中存储多个食谱，您可以将所有值存储为一个数组，每次添加新值时，您都会获取先前存储的值并将新食谱推送到该数组中。这是一个可能的解决方案

const recipes = JSON.parse(localStorage.getItem("Recipes")) || [];
recipes.push(this.data[i]);
localStorage.setItem("Recipes", JSON.stringify(recipes));

如果您想以更健壮的方式在本地存储一堆数据，我还可以推荐使用 IndexedDB：https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API 和/或处理本地存储数据的库，例如 https://github.com/pouchdb/pouchdb

Answer 2

根据当前的实现，它将始终用最新的值覆盖localStorage 值，通常localStorage 使用key 和value 存储任何数据，在您尝试add to fav 时，您总是传递了一个key，这就是为什么它用最新的覆盖。

我已经修改了你的代码，请看一下，希望对你有帮助

添加方法

add(i: any) {
  let recipes = JSON.parse(localStorage.getItem("Recipe")) || [];
  recipes.push(this.data[i]); 
  localStorage.setItem('Recipe', JSON.stringify(recipes));
  console.log('Added in localstorage' + i);

  if (localStorage.getItem('Recipe') === null) {
    alert('TEST');
  }
}

您可能会遇到remove item 的问题，请查看

HTML 代码

<div *ngFor="let recipe of data; let i = index">
  <p>
    {{ recipe.title }}
  </p>
  <img src="{{ recipe.image }}" alt="" />
  <p>{{ recipe.description }}</p>
  <p>{{ recipe.calories }}</p>
  <p>{{ recipe.cookingTime }}</p>
  <p>{{ recipe._id }}</p>
  <button (click)="add(i)">Add to favorite</button>
  <!-- pass this  recipe object with remove method -->
  <button (click)="remove(recipe)">Remove from favorite</button>
  
</div>

删除方法

remove(recipe) {
  let recipes = JSON.parse(localStorage.getItem("Recipe")) || [];
  if(recipes.length){
    recipes = recipes.filter((x:any) => x._id !== recipe._id); // this will remove the item from list
    localStorage.setItem('Recipe', JSON.stringify(recipes));
    console.log('I deleted from localStorage');
  } 
}