Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to reload the current page without losing any form data with HTML?
The easiest way to reload the current page without losing form data is to use WebStorage, where you have persistent storage (localStorage) or session-based (sessionStorage) which remains in memory until your web browser is closed.
Using localStorage to Preserve Form Data
The key is to save form data before the page reloads and restore it after the page loads. Here's how to implement this solution ?
Step 1: Save Form Data Before Page Reload
Use the beforeunload event to capture form data when the page is about to reload ?
window.onbeforeunload = function() {
localStorage.setItem('name', document.getElementById('inputName').value);
localStorage.setItem('phone', document.getElementById('inputPhone').value);
localStorage.setItem('address', document.getElementById('inputAddress').value);
}
Step 2: Restore Form Data After Page Loads
Use the load event to retrieve and populate the form fields ?
window.onload = function() {
var name = localStorage.getItem('name');
var phone = localStorage.getItem('phone');
var address = localStorage.getItem('address');
if (name !== null) document.getElementById('inputName').value = name;
if (phone !== null) document.getElementById('inputPhone').value = phone;
if (address !== null) document.getElementById('inputAddress').value = address;
}
Complete Example
Here's a complete HTML page demonstrating form data preservation ?
<!DOCTYPE html>
<html>
<head>
<title>Form Data Preservation</title>
</head>
<body>
<form>
<input type="text" id="inputName" placeholder="Enter name">
<input type="text" id="inputPhone" placeholder="Enter phone">
<input type="text" id="inputAddress" placeholder="Enter address">
<button type="button" onclick="location.reload()">Reload Page</button>
</form>
<script>
window.onbeforeunload = function() {
localStorage.setItem('name', document.getElementById('inputName').value);
localStorage.setItem('phone', document.getElementById('inputPhone').value);
localStorage.setItem('address', document.getElementById('inputAddress').value);
}
window.onload = function() {
var name = localStorage.getItem('name');
var phone = localStorage.getItem('phone');
var address = localStorage.getItem('address');
if (name !== null) document.getElementById('inputName').value = name;
if (phone !== null) document.getElementById('inputPhone').value = phone;
if (address !== null) document.getElementById('inputAddress').value = address;
}
</script>
</body>
</html>
Conclusion
By using localStorage with beforeunload and load events, you can successfully preserve form data across page reloads, ensuring users don't lose their input when the page refreshes.
8K+ Views
