javascript - 将购物车存储在本地存储中并在路由更改 vue 上持久化数据

Question

我有一辆购物车，每次我改变路线时都会清空，即使我改变路线，我也想保留这辆购物车。我正在使用手表来渲染路线更改的产品。我可以成功地将购物车产品添加到 LocalStorage，但是当我更改路线并添加来自不同类别的产品时，localStorage 会清除。如何通过 localStorage 保存我的购物车？这是我的代码：

    addTocart: function (product) {
          this.cartProducts.push(product)
          console.log(this.cartProducts)
          this.showCart = true
// successfuly added to localStorage
          window.localStorage.setItem('cart', JSON.stringify(this.cartProducts))
        },

在 url 更改时加载产品

watch: {
    '$route.params.categoryId': function (id) {
      this.getProducts()
// I am trying to get the cart from localStorage at this point
      this.cartProducts = window.localStorage.getItem('cart')
      console.log(this.cartProducts)
    }
  },

即使我从不同的路线添加产品，如何从本地存储访问我的购物车？

标签： javascriptvue.jslocal-storage