How to Pass Data to Another Page using JavaScript localStorage?
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.
Why localStorage?
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.
- If the data is too big, URL with long string doesn’t look good.
- Displaying important data in the URL to the user can be harmful to your data security.
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,
- You don’t need to pass the data in URL.
- You don’t need to create the HTML form.
What is localStorage in JavaScript?
It is a property that allows you to store the data in a web browser for a session.
How does localStorage work?
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 act as 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.
How to Pass the Data to Another Page withing passing it in URL?
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 common directory. And open them is 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.
Important Points to Note about localStorage:
- All the data saved using localStorage is saved in the key-0value pair.
- It is a read-only property.
- Almost all the latest version of popular browsers support this property.
- The data saved using this property does not have an expiration date.
- It is different from the sessionStorage JavaScript property (It saves the data for a particular one session).
- Unlike sessionStorage, data saved using localStorage will not be deleted on the closing browser tag.
Other important topics from HTML:
- 7 Basic HTML Tags with Example [Most Useful in Every Web page Development]
- 20+ Best HTML Web Form Design Practices [It has Helped Me Grow Professionally]
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.
