Добавьте массив в локальное хранилище и продолжайте помещать элемент данных в массив

Question

Я хочу сохранить список товаров, которые посещают пользователи, нажав на изображение товара. У меня есть изображение продукта, которое перенаправляет на страницу сведений о продукте

<img
:src="product.images[0]"
spinner-color="white"
:ratio="16/9"
class="hvr-grow"
@click="changeRoute(linkUrl , product.id)"
/>

Нажмите на изображение, чтобы запустить метод vue.

methods: {
    changeRoute (link, productId) {
      const productsList = []
      if (!productsList.includes(productId)) {
        productsList.push(productId)
        localStorage.setItem('products', JSON.stringify(productsList))
      }
      this.$router.push(link + productId)
    },
}

То, что я хочу, это всякий раз, когда пользователь просматривает продукт с productID 1, его productID должен быть сохранен в локальном хранилище, и когда пользователь просматривает другой продукт с productIds 2, 3 и 4, все productIds должны быть сохранены в localalstorage. В локальном хранилище продукты должны быть следующими: products: [1,2,3,4]

Мой текущий код сохраняет один идентификатор продукта, а при просмотре другого продукта он заменяет предыдущий идентификатор продукта текущим.

Любая помощь будет очень ценится. Спасибо

Answer 1

Должно работать:

methods: {
    changeRoute (link, productId) {
      const productsList = localStorage.getItem('products') || []
      if (!productsList.includes(productId)) {
        productsList.push(productId)
        localStorage.setItem('products', JSON.stringify(productsList))
      }
      this.$router.push(link + productId)
    },
}

Я добавил localStorage.getItem ('products')