In web development, session management plays a crucial role. It ensures a smooth user experience while navigating a site and also enhances security.
This article provides a detailed explanation of how to use JavaScript’s sessionStorage to set values for session keys and display those values on different pages of a website.
It is designed to be easy to understand for engineers and those new to web development, covering the basics to advanced applications step by step.
What is a Session?
A session refers to a temporary storage area that persists while a visitor has their browser open. This allows data such as user selections or settings on the site to be retained across pages.
While server-side languages like PHP manage this data on the server, JavaScript can also handle session information on the client side, i.e., within the browser.
What is sessionStorage?
sessionStorage, part of the Web Storage API introduced in HTML5, is a browser-provided feature to locally store data as key-value pairs.
Data saved in sessionStorage is removed when the browser tab is closed, making it ideal for managing session data.
For instance, it is useful when you want to retain partially filled form data while navigating to another page.
Implementation
Setting Values to Session Keys
To set a value to a session key, use the `sessionStorage.setItem` method.
This method takes two arguments: the first is the key name, and the second is the value to associate with that key.
Use `window.sessionStorage.setItem([‘sessionKey’], [‘value’])` for setting values.
For example, to set the value “session_value” to the user’s session key “k1” on a page (`index.html`), write as follows:
<h1>The value set for the session key on this page will be displayed on another page.</h1>
<br>
On this page, the session key "k1" has been set to "session_dadunion".<br>
Click the link below to display the value set for the "k1" key on another page.<br>
The value will be shown in the browser's alert dialog box.<br>
<br>
<br>
<a href="page2.html">Display the value set for the "k1" key on another page >></a>
<script type="text/javascript">
// Store session data
window.sessionStorage.setItem(['k1'], ['session_dadunion']);
</script>
</body>
Displaying Values of Session Keys
To display the value of a session key set earlier on a different page (`page2.html`), use the `sessionStorage.getItem` method.
This method takes the key name as an argument and returns the value stored under that key.
Use `window.sessionStorage.getItem([‘sessionKeyName’])` to retrieve the value, and finally, use `window.sessionStorage.clear()` to clear all sessions.
<h1>This page will display the value set for the session key "k1" in a browser alert dialog box,<br>and then delete all the session data set.</h1>
<br>
<br>
<a href="index.html">Return to the page where the session key is set <<</a>
<script type="text/javascript">
alert(window.sessionStorage.getItem(['k1']));
// Clear session data
window.sessionStorage.clear();
</script>
Demo Page: Displaying Values of Session Keys Set with JavaScript sessionStorage
To experience a sample using sessionStorage, visit the following demo page:
Demo of Displaying Session Key Values Set with JavaScript sessionStorage
Conclusion
This article explained how to use JavaScript’s sessionStorage to set values to session keys and share those values across different pages.
This technique is incredibly useful for remembering temporary actions taken by users on a site, such as retaining form data or user setting preferences.
Leverage this knowledge to develop more user-friendly and interactive websites.
The content of this article covers a wide range, from foundational engineering concepts to advanced applications, ensuring easy understanding for both beginners and experienced developers.
The world of web development is constantly evolving, with new technologies and methods emerging frequently. sessionStorage is one such example.
As technology evolves, so do our learning methods. I hope this article serves as a helpful resource in your learning journey and contributes to the development of better websites.
※ Please note: Use the information at your own risk. Do not reuse the Google Analytics tags included in the demo page head tag.
