How to Reload Current Page Without Losing Any Form Data in JavaScript?

The easiest way to reload current page without losing any form data in Javascript is to use the localStorage.

JavaScript is one of the widely used programming languages by developers. It adds dynamic functionalities to the static webpages and helps developers create interactive webpages. If you are a frontend developer, sometimes you may have noticed that form data is lost when the user reloads the webpage. Re-filling the form again creates a painful experience for the visitors if the form is lengthy enough. Here is the easiest solution to refresh page without losing form data using JavaScript.’

You’d also love to read: Create JQuery Autocomplete Text Box With Example

Let’s begin with the solution!

How to Reload Current Page Without Losing Any Form Data in JavaScript localStorage

In JavaScript, the localStorage is the property of the Window interface that allows the webpage to store the data across the sessions in that particular browser. Using the localStorage mechanism, the form data is auto-saved locally in the browser and is not destroyed on the page load. Moreover, the data remained intact even after the termination of that particular session.

The localStorage mechanism is an excellent solution to allow the users to reload the current page without losing any form data in the HTML webpage using JavaScript.

How to Store Data in JavaScript localStorage?

To store the form data in JavaScript localStorage, we’ll use the setItem() method. It stores the data in the localStorage object and takes the key and value parameters as input.

The parameters can be later used to retrieve the data when the browser reloads the page or a new session is initiated. Below is an example of using the localStorage to save the name and email fields so that the data is not lost on the current page reload.

window.onload = function() {
    localStorage.setItem("name", $('#inputName').val());
    localStorage.setItem("email", $('#inputEmail').val());   
}

The above function stores the values and keys in the local storage, which can later be fetched using the getItem() method.

How to Get Data From JavaScript localStorage?

Once we have stored the data in the local storage using  JavaScript, we can use the getItem() method to fetch it. We’ll pass the parameters we set in the previous steps to fetch the required data.

Here’s an example of it.

var name = localStorage.getItem('name');
console.log(name); //  To print the value of localStorage variable name

The method will fetch the data from the local storage (if it exists), and the console.log will print the value back, which means the visitor can refresh page without losing form data using this JavaScript solution.

How to Destroy Data in JavaScript localStorage?

Once the user has submitted the page or the action is completed, you may require to destroy the stored data in the local storage. In such case, you can use the
removeItem method. Provided below is an example of how you can destroy data from the JavaScript localStorage.

localStorage.removeItem('name');

That’s it! This is how you can store, fetch and destroy data using the JavaScript localStorage and allow the users to reload current page without losing any form data.

Conclusion

Sometimes, the users may require to reload the webpage due to some technical issues and lose the data filled in the form, which can be a terrible experience. In order to avoid such instances, you can use the JavaScript localStorage method in your webpage to store the data locally. This blog post covers the method that you can use to reload current page without losing any form data in JavaScript.

I hope you’ll find this blog post informative and helpful! If you still have any queries, feel free to comment. I will be happy to assist you.

If you are budding developer, you can checkout our blog post series on Magento 2 API.

Also, do not forget to share this post with your developer friends via social media.

Thanks for reading!