New course! Every coder should learn Generative AI!
Try a free lesson+ 1
localStorage and Tables
I’m trying to create a form where the inputs are saved to localStorage, then retrieved on another page and a row is created on a table. However, anytime I input the form fields it only changes that one row’s content and never creates more than one row. I need help… Thanks in advance!
10 Answers
+ 4
Hello Tony Stark . I can give you moral support, but without seeing your actual code, nobody will be able to diagnose what is wrong with it. Provide a testable example.
+ 2
Here Is my modified version: https://www.sololearn.com/compiler-playground/W0hEj8pEUCT0
If you want to retrieve the data to another page you can use this:
```
let storedName = localStorage.getItem("name");
let storedAge = localStorage.getItem("age");
let storedMobile = localStorage.getItem("mobile");
```
+ 1
Please does SL support localStorage
+ 1
https://sololearn.com/compiler-playground/WOkx3s6jW3I3/?ref=app
It is actually designed on pycharm so it may not return what you type in the input
+ 1
Also, it is supposed to be two seperate pages that is why im using localStorage on the same page
+ 1
I updated my code again: https://www.sololearn.com/compiler-playground/W0hEj8pEUCT0
As for the other new page:
```
<!DOCTYPE html>
<html>
<head>
<title>User Profile</title>
</head>
<body>
<h1>User Profile</h1>
<p><strong>Name:</strong> <span id="profileName"></span></p>
<p><strong>Age:</strong> <span id="profileAge"></span></p>
<p><strong>Mobile:</strong> <span id="profileMobile"></span></p>
<script src="profile.js"></script>
</body>
</html>
```
make a new js file mine is called profile.js
```
document.addEventListener("DOMContentLoaded", function() {
try {
// Retrieve user information from localStorage
let profileName = localStorage.getItem("name");
let profileAge = localStorage.getItem("age");
let profileMobile = localStorage.getItem("mobile");
// Update the profile page with the user's information
document.getElementById("profileName").textContent = profileName || "N/A";
document.getElementById("profileAge").textContent = profileAge || "N/A";
document.getElementById("profileMobile").textContent = profileMobile || "N/A";
} catch (error) {
console.error("Error while retrieving or displaying user information:", error);
}
});
```
+ 1
Coderwe2 , how can i keep the changes to the table permanent even after refreshing the page?
+ 1
What i actually want to do works just fine on sl, but with the actual thing, the table is on one page and the form is on another page
+ 1
Coderwe2 , what i want to fix is what your updated code behaves like… instead of adding a new row, it will just change the already existing row
+ 1
@Tony Stark
I revised my code and modified it again. I fixed it, all the problems you stated should be fixed in my newly modified code. Right here: https://www.sololearn.com/compiler-playground/W0hEj8pEUCT0
You said your using pycharm, to make the thing you wanted create 2 html pages one for the form and one for the page that retrieves and shows the data. Make two js files, one for the form and one for the other page.
As for the other page:
```
<!DOCTYPE html>
<html>
<head>
<title>User Profile</title>
</head>
<body>
<h1>User Profile</h1>
<p><strong>Name:</strong> <span id="profileName"></span></p>
<p><strong>Age:</strong> <span id="profileAge"></span></p>
<p><strong>Mobile:</strong> <span id="profileMobile"></span></p>
<script src="profile.js"></script>
</body>
</html>
```
make a js file for the page that shows the data, mine is called profile.js
```
document.addEventListener("DOMContentLoaded", function() {
try {
// Retrieve user information from localStorage
let profileName = localStorage.getItem("name");
let profileAge = localStorage.getItem("age");
let profileMobile = localStorage.getItem("mobile");
// Update the profile page with the user's information
document.getElementById("profileName").textContent = profileName || "N/A";
document.getElementById("profileAge").textContent = profileAge || "N/A";
document.getElementById("profileMobile").textContent = profileMobile || "N/A";
} catch (error) {
console.error("Error while retrieving or displaying user information:", error);
}
});
```
You can modify it, add more input fields etc.
Often have questions like this?
Learn more efficiently, for free:
Hot today
Hello
0 Votes
Kotlin programing
0 Votes
[SOLVED] About split() Function
1 Votes
Which coding language?
2 Votes
From code challenges
0 Votes