本地存储中的覆盖问题 angular

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 and/or a library which handles locally stored data such as 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');
  } 
}

本地存储中的覆盖问题 angular

Overwriting problem in localstorage angular

javascript

angular

local-storage

angular-local-storage