Breaking News: Grepper is joining You.com. Read the official announcement!

get and set data in local storage javascript

Add Answer

Showrove Roy answered on March 7, 2020 Popularity 9/10 Helpfulness 2/10

answer get and set data in local storage javascript

related javascript set local storage value

related set and get the data from local storage

get and set data in local storage javascript

Comment

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Save Card data on local storage</title>
</head>

<body>
    <input type="text" id="product_name" placeholder="Product Name">
    <input type="text" id="product_quantity" placeholder="Product Quantity">
    <button id="btn_card">Add to Card</button>



    <section>
        <ul id="display-Field">

        </ul>
    </section>


    
    <script>
        // 1 get input value from html
const getInputValueById = (id) => {
    const inputField = document.getElementById(id);
    const inputValue = inputField.value;
    inputField.value = '';
    return inputValue;
};


// 2 set click event on btn and start operation
document.getElementById('btn_card').addEventListener('click', () => {
    const productName = getInputValueById('product_name');
    const productQuantity = getInputValueById('product_quantity');
    setValueOnLocalStorage(productName, productQuantity);
    addDisplayProduct(productName, productQuantity);

});


// 3 check isCart ablavail in localstorage 
const getCardFromLocalStorage = () => {
    const savedCart = localStorage.getItem('cart');
    let cart = {};
    if (savedCart) {
        cart = JSON.parse(savedCart);
    }
    return cart;
};


//4 add value in to the object and set to the local storage 
const setValueOnLocalStorage = (product, quantity) => {
    const cart = getCardFromLocalStorage();

    // set value in object 
    cart[product] = quantity;
    const cartStringified = JSON.stringify(cart);


    // save to the local storage 
    localStorage.setItem('cart', cartStringified);
};


//5 show product on display
const addDisplayProduct = (productName, quantityNum) => {
    const displayField = document.getElementById('display-Field');
    const porductItem = document.createElement('li');
    porductItem.innerHTML = `
    ${productName} - ${quantityNum}
    `;
    displayField.appendChild(porductItem);
};


// 6 get product list from local storage 
const showProduct = () => {
    const cart = getCardFromLocalStorage();
    for (let product in cart) {
        addDisplayProduct(product, cart[product]);
    }
};


// 7 call function-6
showProduct();

    </script>
</body>

</html>

Popularity 9/10 Helpfulness 2/10 Language javascript

Source: Grepper

Tags: get javascript local-storage set

Link to this answer
Share Copy Link

Contributed on Sep 11 2022

Showrove Roy

0 Answers Avg Quality 2/10

Closely Related Answers

javascript set local storage value

Comment

var testObject = { 'one': 1, 'two': 2, 'three': 3 };

// Put the object into storage
localStorage.setItem('testObject', JSON.stringify(testObject));

// Retrieve the object from storage
var retrievedObject = localStorage.getItem('testObject');

console.log('retrievedObject: ', JSON.parse(retrievedObject));

Popularity 10/10 Helpfulness 10/10 Language javascript

Source: Grepper

Tags: javascript j

Link to this answer
Share Copy Link

Contributed on Mar 07 2020

Mobile Star

0 Answers Avg Quality 2/10

set and get the data from local storage

Comment

   //set and get the data file name regUSer:
   let data = [
            { "name": "Krishna", "address": "Banglore", "email": "krishna@gmail.com", "phone": "9964796493", "gender": "Male", "role": "Software Developer" },
            { "name": "Ravi", "address": "Hyderabad", "email": "ravi@gmail.com", "phone": "9964796493", "gender": "Male", "role": "Backend Developer" },
            { "name": "Ram", "address": "Pune", "email": "ram@gmail.com", "phone": "9964796493", "gender": "Male", "role": "Tester" },
            { "name": "Hari", "address": "Mumbai", "email": "hari@gmail.com", "phone": "9964796493", "gender": "Male", "role": "Frontend Developer" }
        ]


        localStorage.setItem("myData", JSON.stringify(data));

        var dataStored = JSON.parse(localStorage.getItem("myData"));
        console.log(dataStored);
        let allTableData = dataStored.concat(JSON.parse(localStorage.getItem('name')));
        console.log(allTableData);


        var trRowString = "";
        for (var i = 0; i < allTableData.length; i++) {
            trRowString = `${trRowString}
                <tr>
                <td>${allTableData[i].name}</td>
                <td>${allTableData[i].address}</td> 
                <td>${allTableData[i].email}</td>
                <td>${allTableData[i].phone}</td>
                <td>${allTableData[i].gender}</td>
                <td>${allTableData[i].role}</td>
                </tr>`;
        }
        document.getElementById('tbody').innerHTML = trRowString;
        
        //Registration.html
           let formsData = document.getElementById('formsData');
    formsData.addEventListener('submit', function (event) {

      // debugger;
      event.preventDefault();
      let pName = document.getElementById('pName').value;
      let pAddress = document.getElementById('pAddress').value;
      let pEmail = document.getElementById('pEmail').value;
      let pPhone = document.getElementById('pPhone').value;
      let manButton = document.getElementById('manButton').value;
      let personRole = document.getElementById('personRole').value;

      let personObjects = {
        "name": pName,
        "address": pAddress,
        "email": pEmail,
        "phone": pPhone,
        "gender": manButton,
        "role": personRole

      }
      // window.finalArray.push(personObjects)
      alert('form Submitted')

      console.log(typeof personObjects);
      let msgArr = JSON.parse(localStorage.getItem('name')) ? JSON.parse(localStorage.getItem('name')) : []
      msgArr.push(personObjects)
      localStorage.setItem('name', JSON.stringify(msgArr))
      console.log(msgArr);
      console.log(typeof msgArr);

    })

Popularity 9/10 Helpfulness 8/10 Language javascript

Source: Grepper

Tags: get

Link to this answer
Share Copy Link

Contributed on Dec 06 2022

Arpan Dashore

0 Answers Avg Quality 2/10

get and set data in local storage javascript

Contents

More Related Answers

get and set data in local storage javascript

Closely Related Answers

javascript set local storage value

set and get the data from local storage

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.