In the world of web development, finding effective ways to retain information is always crucial. Especially, passing data between different pages directly impacts user experience. Previously, we introduced the method to display values set in session keys on another page using “Guide to Using sessionStorage: How to Share Data Across Pages with JavaScript“. This time, we will introduce a similar but slightly different technique: saving data using JavaScript’s localStorage and displaying that data on another page.
What is Web Storage?
Web Storage has two types: localStorage and sessionStorage. These are used to store more data securely in the browser. The main difference between them is the persistence of data. localStorage stores data persistently, meaning the data remains even after the browser is closed. On the other hand, sessionStorage clears data when the browser session ends. Additionally, these storage options can store up to approximately 5MB of data, but for security reasons, they are not suitable for storing sensitive personal information.
Saving Values to Local Storage (index.html): HTML and JavaScript Implementation
To save values in local storage, use the JavaScript method localStorage.setItem.
Set values using window.localStorage.setItem([‘storage name’], [‘value’]).
For example, the following code saves the value “locals_dadunion” with the key “ls1” in localStorage.
<h1>This page saves values set in localStorage and displays them on another page.</h1>
<br>
On this page, we set "locals_dadunion" in localStorage under the key "ls1".<br>
Clicking the link below will display the value stored in "ls1" on another page.<br>
It will be displayed in a browser alert dialog message.<br>
<br>
<br>
<a href="page2.html">Display the value set in "ls1" on another page>></a>
<script type="text/javascript">
// Storing data in localStorage
window.localStorage.setItem(['ls1'],['locals_dadunion']);
</script>
By placing this code in the index.html page, the data will be automatically saved to localStorage when a user visits the page.
Displaying Saved Data on Another Page (page2.html): HTML and JavaScript Implementation
Next, in page2.html, we will retrieve and display the stored data.
You can use the localStorage.getItem method to fetch data using a specified key.
Retrieve and display the set value using window.localStorage.getItem([‘storage name’]).
Additionally, the localStorage.clear method allows you to delete all stored data.
<h1>This page displays the value set in localStorage "ls1"<br>in a browser alert dialog message,<br>then clears all set localStorage data.</h1>
<br>
<br>
<a href="index.html">＜＜Return to the page to set localStorage</a>
<script type="text/javascript">
alert(window.localStorage.getItem(['ls1']));
// Deleting all data from localStorage
window.localStorage.clear();
</script>
This code retrieves the value stored in “ls1” from localStorage and displays it in an alert dialog. Then, it calls the clear method to delete all local storage data.
[localStorage] JavaScript Demo Page to Display Values Stored in Local Storage on Another Page
To see this in action, check out the demo page below:
[localStorage] JavaScript Demo to Display Stored Values on Another Page
Conclusion
JavaScript’s localStorage is very useful for sharing data between different pages. However, you should be careful about the type of data you store. To avoid security risks, do not store highly sensitive information. Use this technique to build websites that provide a better user experience.
※ If you reuse this, please do so at your own risk.
Do not copy the Google Analytics tag from the demo page’s
