Page 1: index.html
<!DOCTYPE html>
<html>
<head>
<title>Page 1</title>
</head>
<body>
<h2>Student Information</h2>
<label>Enter Name:</label>
<input type="text" id="txtName">
<br><br>
<button onclick="sendData()">Next Page</button>
<script>
function sendData() {
var name = document.getElementById("txtName").value;
// Save data in Local Storage
localStorage.setItem("StudentName", name);
// Open second page
window.location.href = "result.html";
}
</script>
</body>
</html>
Page 2: result.html
<!DOCTYPE html>
<html>
<head>
<title>Page 2</title>
</head>
<body>
<h2>Student Details</h2>
<p>
Name :
<span id="displayName"></span>
</p>
<script>
// Get data from Local Storage
var name = localStorage.getItem("StudentName");
// Display data
document.getElementById("displayName").innerHTML = name;
</script>
</body>
</html>
Output
Page 1
Student Information
Enter Name: [Nilesh Gupta]
[Next Page]
⬇️ Click Next Page
Page 2
Student Details
Name : Nilesh Gupta
How It Works
- User enters a name on index.html.
-
JavaScript stores the value using:
localStorage.setItem("StudentName", name); - The browser opens result.html.
-
The second page retrieves the value:
localStorage.getItem("StudentName"); - The name is displayed on the page.
This is one of the simplest ways to transfer data between HTML pages using only JavaScript, without any server-side code or database.
No comments:
Post a Comment