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, use WebStorage where you have -persistent storage (localStorage) or session-based (sessionStorage) which remains in memory until your web browser is closed.

Try this when the page is about to reload,

window.onbeforeunload = function() {
   localStorage.setItem(name, $('#inputName').val());
   localStorage.setItem(phone, $('#inputPhone').val());
   localStorage.setItem(subject, $('#inputAddress').val());
}

Now check it like −

window.onload = function() {
   var name = localStorage.getItem(name);
   var phone = localStorage.getItem(phone);
   if (name !== null) $('#inputName').val(name); if (phone !== null) $('#inputPhone').val(phone);
   // ...
}

Updated on: 24-Jun-2020

7K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements