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

The integration of a Bootstrap modal within the side bar's rendering

Leverage the power of AJAX and PHP to securely save comments for future

Issue arising during reconnection following a disconnection in the node-redis client

When attempting to use nodejs's collection.find() method with MongoDB, no response is received

Is there a way to utilize a POST request to pass a React component from server.js to App.js for rendering?

Issue with a Jquery toggleClass function not working properly on hover

Do developers typically define all flux action types within a constants object as a common programming practice?

Prevent the selection of a dropdown option in AngularJS once it has already

Is it feasible to activate a Bootstrap Tooltip from a different element?

retrieving information from the database and passing it to the controller

Differences between ClosureFeedbackCellArray and FeedbackVector in the V8 engine

Is Vuejs utilizing a customized event directive that does not require an event handler?

Can you explain the significance of the regular expression in a dojo configuration file named dj

The distinction between storing data and component data becomes apparent when using Vuex in conjunction with a persisted state

Incorporating components into a pre-existing webpage without utilizing npm

Steps to reveal a div when a button is clicked within a v-for loop using VueJS

The jquery selector fails to retrieve all elements

Tips for muting console.log output from a third-party iframe

Issue encountered: Trying to deploy firebase functions and hosting with vue-cli v3 and node.js leads to an error "No npm package found in functions source directory

Encountered a SyntaxError: Unexpected token "e" while attempting to parse a JSON string