Avoid accidental overwrites in localStorage using JavaScript

Question

Avoid accidental overwrites in localStorage using JavaScript

I've been working on a Vue project where I'm implementing a shopping cart feature. In this setup, when the user clicks on a button, the item details are stored in localStorage and then displayed in the shopping cart interface.

However, I encountered an issue where pressing on a new product to add it to the cart resulted in my key being overwritten. Consequently, I could only have one item in the cart at a time.

Snippet of relevant code:

addToCart() {
    var size = this.selectedSize;
    var color = this.selectedColor;
    let newItem = {size: size, color: color, name: this.getProductDetails(this.productLinks).name, id: this.getProductDetails(this.productLinks).id};
    this.cartItems.push(newItem);
    localStorage.setItem(CART_STORAGE_KEY, JSON.stringify(this.cartItems));
}

javascript vue.js

Answer 1

Answer №1

addToCart() {
  const item = {
    size: this.selectedSize,
    color: this.selectedColor,
    name: this.getProductInfo(this.productLinks).name,
    id: this.getProductInfo(this.productLinks).id,
  };
  this.cartItems.push(item);
  const currentItems = localStorage.getItem(CART_STORAGE_KEY) || '[]';

  localStorage.setItem(
    CART_STORAGE_KEY,
    JSON.stringify([...JSON.parse(currentItems), ...this.cartItems])
  );
},

This approach should function correctly, but it may not be the most efficient solution. It would be more appropriate to load cart items from localStorage when the relevant component is initialized.

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

With the cart now in sync with localStorage, you can simplify your toBasket() method:

toBasket() {
  const item = {
    size: this.selectedSize,
    color: this.selectedColor,
    name: this.getProductInfo(this.productLinks).name,
    id: this.getProductInfo(this.productLinks).id,
  };
  this.cartItems.push(item);
  localStorage.setItem(CART_STORAGE_KEY, JSON.stringify(this.cartItems));
},

Extra Credit:

Consider using Vuex to manage your cart items and utilize the npm package vuex-persisted-state for automatic synchronization between the Vuex cart module and localStorage.

Answer 2

addToCart() {
  const item = {
    size: this.selectedSize,
    color: this.selectedColor,
    name: this.getProductInfo(this.productLinks).name,
    id: this.getProductInfo(this.productLinks).id,
  };
  this.cartItems.push(item);
  const currentItems = localStorage.getItem(CART_STORAGE_KEY) || '[]';

  localStorage.setItem(
    CART_STORAGE_KEY,
    JSON.stringify([...JSON.parse(currentItems), ...this.cartItems])
  );
},

This approach should function correctly, but it may not be the most efficient solution. It would be more appropriate to load cart items from localStorage when the relevant component is initialized.

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

With the cart now in sync with localStorage, you can simplify your toBasket() method:

toBasket() {
  const item = {
    size: this.selectedSize,
    color: this.selectedColor,
    name: this.getProductInfo(this.productLinks).name,
    id: this.getProductInfo(this.productLinks).id,
  };
  this.cartItems.push(item);
  localStorage.setItem(CART_STORAGE_KEY, JSON.stringify(this.cartItems));
},

Extra Credit:

Consider using Vuex to manage your cart items and utilize the npm package vuex-persisted-state for automatic synchronization between the Vuex cart module and localStorage.

Avoid accidental overwrites in localStorage using JavaScript

Answer №1

Extra Credit:

Similar questions

Creating a Regular Expression that excludes all white spaces, including those at the start or end of the string

Challenges with handling JSON data in JavaScript

Difficulty with info window within a for loop

Having difficulty changing the value of a Select element in AngularJS

Error event triggered by Ajax call despite receiving 200 ok response

Extract website addresses from a text and store them in an array

The Bootstrap Mobile Navigation transition is not displaying as intended in my CSS coding

An exploration on integrating a controller into an Angular directive class using Typescript

Formatting specific elements within an array

What is the best way to extract an object from an array that only includes one element, and that element is an object?

AngularJS Get request unable to fetch image URL due to receiving a "302 found" error

Utilizing node-json2html, generate individual HTML tables for each record

Cookies are strangely absent from the ajax call to the web api - a puzzling issue indeed for Web Api users

Are you familiar with manipulating the JSON data array retrieved from an Ajax response?

Utilize Javascript and JQuery to implement sending a custom header in an OPTIONS preflight API request

Having trouble sending data from a page to a child component using getStaticProps

Issue with serving static files in ExpressJs

Exporting JavaScript formatting in Netbeans is a breeze

Error: 'require' function is not recognized in the latest JavaScript file

Create a duplicate of the prop object by transferring it to a fresh data