In this quick guide, I will share the code to pass data to another page using JavaScript localStorage. Before that, you should know why do you need localStorage and how does it work.
Usually, we can pass the data from one page to another page as a parameter in the URL. Passing those values in URL has certain disadvantages.
Another way is to use the POST method. For this, you need to create an HTML form.
If you want to avoid passing data into the URL or creating a form, leverage the use of localStorage with the simple JavaScript.
So using localStorage,
It is a property that allows you to store the data in a web browser for a session.
With the localStorage property, we can save the data into the browser. You can retrieve that data for the same or for any other web page.
Here, local storage acts as an intermediate to save and read the data.
JavaScript has simple functions to save and get the data. All the data saved in local storage is in the form of a key-value pair.
HTML and Javascript Code for testing localStorage:
<!DOCTYPE html>
<html>
<body>
<script>
// Check browser support
if (typeof(Storage) !== "undefined") {
// Store
localStorage.setItem("programming", "Python");
}
</script>
</body>
</html>
Save it as first.html.
It will save the data (programming(key)/Python(value)) in the local browser.
Note: It is always good practice to check if your browser supports the localStorage property, though it is supported by most of the popular browsers.
Now let’s write an HTML and JavaScript code to read this data.
<!DOCTYPE html>
<html>
<body>
<div id="result"></div>
<script>
// Check browser support
if (typeof(Storage) !== "undefined") {
// Retrieve
document.getElementById("result").innerHTML = localStorage.getItem("programming");
} else {
document.getElementById("result").innerHTML = "Browser does not support Web Storage.";
}
</script>
</body>
</html>
Save it as second.html.
Save both the files in a common directory. And open them in browser tabs. Using second.html, You are able to read the value you have set for programming using first.html.
Note: In the above code, we have added JavaScript code inside the HTML page itself. You can add it externally as well.
Other important topics from HTML:
This is all about a quick tutorial to pass data to another page using JavaScript localStorage. If you have any question, feel free to discuss in the comment.
I am a Python enthusiast who loves Linux and Vim. I hold a Master of Computer Science degree from NIT Trichy and have 10 years of experience in the IT industry, focusing on the Software Development Lifecycle from Requirements Gathering, Design, Development to Deployment. I have worked at IBM, Ericsson, and NetApp, and I share my knowledge on CSEstack.org.
Hi Aniruddha, does this localhost support for all browsers?
Hi Alann, I think you mean to say localstorage and not localhost. Yes, all popular browsers support localstorage concepts.
Sir, I want to send data from one webpage to another webpage.
Will you please send me the code how can I do it?
I tried a lot but I couldn’t.
Sir, please send me the coding in my email.
the email is (email id is hidden.)
Hi Mukesh,
There can be multiple ways based on how you make the interface between those two web pages.
If you add a link from one page to another, you can pass the data in the request body or the URL parameters. If you don’t have an interface and want those two web pages to work independently, save the data from one page (maybe inside the database or some text file.) Use that data in your second webpage.