CODEWITHSUNDEEP
javascripthtmlforms
Mahesh Mindrops
Mahesh Mindrops

Reputation: 13

How to display data fetched from localstorage to a simple HTML page

I'm trying to keep the data saved on the submit.html page. The data is being stored on localstorage, i want the entered data to be in the table for always whenever i visit that page. Currently it is visible on the time of submit event only. when i go back to submit.html page with another entry, the previous data was gone.

Here's the code.

1 - index.html

<!DOCTYPE html>
<html>
<head>
    <title>User Registration</title>
</head>
    <body>
        <h1>User Registration Form</h1>
        <form action="submit.html" onsubmit="callme()">
                Name:<br>
                <input id="name" type="text">
                <br>
                Adress:<br>
                <input id="address" type="text">
                <br>
                Email:<br>
                <input id="email" type="email">
                <br>
                Phone:<br>
                <input id="phone" type="number">
                <br><br>
                <input type="submit" value="Submit">
                <input type="reset" value="Reset" name="Reset">
        </form>
        <script>
            function callme(){
                var name = document.getElementById('name').value;
                localStorage.setItem('name', name);
                var address = document.getElementById('address').value;
                localStorage.setItem('address', address);
                var email = document.getElementById('email').value;
                localStorage.setItem('email', email);
                var phone = document.getElementById('phone').value;
                localStorage.setItem('phone', phone);

            }
        </script>
    </body>
</html>

2 - submit.html

<!DOCTYPE html>
<html>
<head>
    <title>Detail Page</title>
</head>
    <body>
        <h1>User Detail Page</h1>
        <div id="result-table">
                <table border="1">
                    <tr>
                        <th>Name</td>
                        <th>Address</td>
                        <th>Email</th>
                        <th>Phone</td>
                    </tr>
                    <tr>
                        <td id="first"></td>
                        <td id="second"></td>
                        <td id="third"></td>
                        <td id="fourth"></td>
                    </tr>
                </table>
                <br>
            </div>

        <script>
            window.onload = function() {
                document.getElementById('first').innerText = localStorage.getItem('name');
                document.getElementById('second').innerText = localStorage.getItem('address');
                document.getElementById('third').innerText = localStorage.getItem('email');
                document.getElementById('fourth').innerText = localStorage.getItem('phone');

            };
        </script>
        <form action="/index.html">
            <button >Go Back</button>
        </form>
    </body>
</html>

Upvotes: 1

Views: 8772

Answers (3)

chien
chien

Reputation: 1

var name = document.getElementById('name').value;
var address = document.getElementById('address').value;
var email = document.getElementById('email').value;
var phone = document.getElementById('phone').value;

let formData = {};
formData.name = name;
formData.email = email;
formData.address = address;
formData.phone = phone;

let formDataArry = localStorage.getItem('formDataArry') || []

formDataArry.push(formData)

localStorage.setItem('formDataArry',formDataArry )

Upvotes: 0

trincot
trincot

Reputation: 350147

You could store in local storage one entry containing a JSON-encoded array. Each entry in that array would need to have the four values you are interested in. So at one specific moment the single localStorage entry could have a (string) value like this:

'[ { "name": "Mary", "address": "Straight street 1", "email": "[email protected]", "phone": "0123" }, 
   { "name": "John", "address": "Highstreet 10", "email": "[email protected]", "phone": "321" } ]'

Here is how you could code that in JS in your existing pages:

  1. index.html

    function getData() {
    return JSON.parse(localStorage.getItem('data') || "[]");
}

function callme() {
    const data = getData();
    const obj = Object.assign(...["name", "address", "email", "phone"].map(prop => 
         ({ [prop]: document.getElementById(prop).value }))
    );
    localStorage.setItem('data', JSON.stringify(data.concat(obj)));
}

  2. submit.html

    function getData() {
    return JSON.parse(localStorage.getItem('data') || "[]");
}

window.onload = function() {
    const tr = document.querySelector('#result-table tr:last-child');
    const tbody = tr.parentNode;
    const data = getData();
    for (let i = 1; i < data.length; i++) {
        tbody.appendChild(tr.cloneNode(true));
    }
    data.forEach((row, i) => 
        Object.keys(row).forEach(prop => 
            tbody.rows[i+1].querySelector('.' + prop).textContent = row[prop]
        );
    );
};

Upvotes: 0

Arulmozhi Manikandan
Arulmozhi Manikandan

Reputation: 336

I understand from your code that you overriding your existing data with the previous data, instead setting the value to a single key in local storage create and locally with the copy of previous data and add new data to it whenever you submit in that case you can have multiple forms submit and can display in the table.

var name = document.getElementById('name').value;
var address = document.getElementById('address').value;
var email = document.getElementById('email').value;
var phone = document.getElementById('phone').value;

let formData = {};
formData.name = name;
formData.email = email;
formData.address = address;
formData.phone = phone;

let formDataArry = localStorage.getItem('formDataArry') || []

formDataArry.push(formData)

localStorage.setItem('formDataArry',formDataArry )

Then you can loop the array in the table to get the table with the data from local storage

Upvotes: 1

Related Questions