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

set and get the data from local storage

Add Answer

Arpan Dashore answered on February 28, 2020 Popularity 9/10 Helpfulness 8/10

answer set and get the data from local storage

related how to get variable in local storage in javascript

related get and set data in local storage javascript

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 javascript local-storage set

Link to this answer
Share Copy Link

Contributed on Dec 06 2022

Arpan Dashore

0 Answers Avg Quality 2/10

Closely Related Answers

how to get variable in local storage in javascript

Comment

localStorage.getItem('id');

Popularity 10/10 Helpfulness 4/10 Language javascript

Source: stackoverflow.com

Tags: get

Link to this answer
Share Copy Link

Contributed on Feb 28 2020

Blue Bear

0 Answers Avg Quality 2/10

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

Link to this answer
Share Copy Link

Contributed on Sep 11 2022

Showrove Roy

0 Answers Avg Quality 2/10

set and get the data from local storage

Contents

More Related Answers

set and get the data from local storage

Closely Related Answers

how to get variable in local storage in javascript

get and set data in local storage javascript

Grepper

Documentation

Social

Legal

Contact

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