In e-commerce websites, it is common to have a shopping cart functionality that allows users to add items they want to purchase. It is important to store this cart information in a way that is specific to each user. One way to achieve this is by using the sessionStorage object in JavaScript.

What is Session Storage?

sessionStorage is a web storage object that is available in modern web browsers. It allows you to store data for a specific domain and only lasts for the duration of the user’s session. The data is stored on the client’s side and can be accessed and modified within the same browser window or tab.

Storing Shopping Cart Information

To store user-specific shopping cart information using sessionStorage, you can follow these steps:

1. Add items to the Cart: When a user adds an item to their shopping cart, you can store the item information in a JavaScript object.

const item = {
  id: 1,
  name: "Product Name",
  price: 9.99,
  quantity: 1
};

// Add item to cart
let cart = sessionStorage.getItem('cart');
if (cart) {
    cart = JSON.parse(cart);
    cart.push(item);
} else {
    cart = [item];
}
sessionStorage.setItem('cart', JSON.stringify(cart));

1. Retrieve Cart Information: To retrieve the cart information, simply get the item from sessionStorage and parse it back into a JavaScript object.

let cart = sessionStorage.getItem('cart');
if (cart) {
    cart = JSON.parse(cart);
    console.log(cart);
} else {
    console.log("Cart is empty");
}

1. Update Cart Information: If the user adds more items, removes items, or updates quantities, you can update the cart information in the sessionStorage.

// Update quantity for a specific item in the cart
function updateCartItemQuantity(itemId, quantity) {
    let cart = sessionStorage.getItem('cart');
    if (cart) {
        cart = JSON.parse(cart);
        const item = cart.find(item => item.id === itemId);
        if (item) {
            item.quantity = quantity;
        }
        sessionStorage.setItem('cart', JSON.stringify(cart));
    }
}

1. Remove Cart Information: If the user completes their purchase or clears their cart, you can remove the cart information from sessionStorage.

// Clear the cart
sessionStorage.removeItem('cart');

With sessionStorage, you can easily store and manage user-specific shopping cart information in JavaScript. Remember that sessionStorage is limited to the current browser session, and the data will be cleared when the user closes the browser or navigates away from the website.

#techblog #javascript