How to display data fetched from localstorage to a simple HTML page
Question
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>
3 answers
solution1
1 2018-11-19 11:01:10
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
solution2
0 2018-11-19 11:04:59
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": "mary@abc.com", "phone": "0123" },
{ "name": "John", "address": "Highstreet 10", "email": "john@yho.com", "phone": "321" } ]'
Here is how you could code that in JS in your existing pages:
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))); }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] ); ); };
solution3
0 2022-06-13 17:43:50
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 )
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.