Local Storage (Browser Object Module) in JS

#javascript #html #beginners #webdev

Local Storage is a feature that enables JavaScript sites and apps to store key-value pairs in a web browser with no expiration date. This means that the data stored in the browser will persist even after the browser window is closed.

Five methods used for local storage:

setItem() = This method is used to add keys and values to the local storage.
getItem() = This method is used to get items from the local storage.
removeItem() = This method is used to remove an item from the local storage buy key.
clear() = This method is used to clear the local storage.
key() = This method is used to retrieve a key of local storage by passing a number.

Below this is a small project to understand Local storage.

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input id="product-name" type="text" placeholder="product">
    <input id="product-quantity" type="text" placeholder="quantity">
    <button onclick="addProduct()">Add product</button>
    <ul id="product-container">

    </ul>
    <script src="product.js"></script>
</body>
</html>

JavaScript:

const addProduct = () => {
    const productField = document.getElementById('product-name');
    const quantityField = document.getElementById('product-quantity');
    const product = productField.value;
    const quantity = quantityField.value;

    productField.value = '';
    quantityField.value = '';

    console.log(product, quantity);
    displayProduct(product, quantity);
    saveProductToLocalStorage(product, quantity);
}

const displayProduct = (product, quantity) => {
    const ul = document.getElementById('product-container');
    const li = document.createElement('li');
    li.innerText = `${product}: ${quantity}`;
    ul.appendChild(li);
}


const getStoredShoppingCart = () => {
    let cart = {};
    const storedCart = localStorage.getItem('cart');
    if (storedCart){
        cart = JSON.parse(storedCart);
    }
    return cart;
}

const saveProductToLocalStorage = (product, quantity) => {
    const cart = getStoredShoppingCart();
    cart[product] = quantity;
    const cartStringified = JSON.stringify(cart);
    localStorage.setItem('cart', cartStringified);          // save into the local storage. 
}

// Display the html 
const displayProductsFromLocalStorage = () => {
    const savedCart = getStoredShoppingCart();
    console.log(savedCart);
    for (const product in savedCart){
        const quantity = savedCart[product];
        console.log(product);
        displayProduct(product, quantity);
    }
}

displayProductsFromLocalStorage();