Question

我正在研究Vue项目，正在创建购物车。当您按下按钮时，项目详细信息将传递到localStorage并从其中显示在购物车中。

问题是当我按新产品将其放入购物车时-我的钥匙被覆盖了，因此我只能在购物车中放一个物品。

相关代码：

tobakset(){
    var size = this.ssize;
    var color = this.scolor;
    let obj = {s : size, c : color, n : this.link(this.links).name, id : this.link(this.links).id}
    this.items.push(obj)
    localStorage.setItem(STORAGE_KEY, JSON.stringify(this.items));
}

Answer 1

toBasket() {
  const obj = {
    s: this.ssize,
    c: this.scolor,
    n: this.link(this.links).name,
    id: this.link(this.links).id,
  };
  this.items.push(obj);
  const currentItems = localStorage.getItem(STORAGE_KEY) || '[]';

  localStorage.setItem(
    STORAGE_KEY,
    JSON.stringify([...JSON.parse(currentItems), ...this.items])
  );
},

这应该有效。虽然感觉有点不对劲。如果我们将购物篮物品存储在localStorage中，则您可能希望在创建适当的组件后立即将它们加载到购物车中。

created() {
  const currentItems = localStorage.getItem(STORAGE_KEY) || '[]';
  this.items = JSON.parse(currentItems);
},

现在，您只需为toBasket()方法执行此操作，因为您刚刚将购物车与localStorage中存储的项目进行了同步：

toBasket() {
  const obj = {
    s: this.ssize,
    c: this.scolor,
    n: this.link(this.links).name,
    id: this.link(this.links).id,
  };
  this.items.push(obj);
  localStorage.setItem(STORAGE_KEY, JSON.stringify(this.items));
},

奖励积分：

使用Vuex存储购物车项目，并使用npm软件包vuex-persistesd-state自动将Vuex购物车模块与localStorage同步。

JavaScript防止覆盖localStorage

1 个答案:

奖励积分：