Front-end Tutorials

Front-end Tutorials

HTMLCSSSassJavaScriptReactJS
CMS Tutorials

CMS Tutorials

WordPress
Tutorials expand

HTML Session Storage

Posted in HTML Tutorial
Updated on Sep 29, 2024
By Mari Selvan
πŸ‘οΈ 8 - Views
⏳ 4 mins
πŸ’¬ 1 Comment
HTML Session Storage

Photo Credit to CodeToFun

πŸ™‹ Introduction

Session Storage is part of the Web Storage API that provides a way to store data for the duration of the page session. Unlike localStorage, which persists data across browser sessions, sessionStorage data is cleared when the page session ends. This makes it ideal for storing temporary data that you only need for a single session.

❓ What Is Session Storage?

Session Storage is a web storage mechanism that allows you to store key-value pairs in a web browser for the duration of the page session. A page session lasts as long as the browser is open, and it survives over page reloads and restores. However, it is not shared between tabs or windows.

πŸ€” How Does Session Storage Work?

Session Storage works by providing a sessionStorage object that is accessible through JavaScript. This object allows you to store and retrieve data associated with the current session. Data stored in sessionStorage is specific to the page that stored it and is not available to other pages or tabs.

πŸ’Ύ Using Session Storage

To use sessionStorage, you can interact with the sessionStorage object, which provides methods to set, get, and remove data. Here are the basic methods:

  • sessionStorage.setItem(key, value): Stores a value with a specific key.
  • sessionStorage.getItem(key): Retrieves the value associated with a specific key.
  • sessionStorage.removeItem(key): Removes the value associated with a specific key.
  • sessionStorage.clear(): Clears all key-value pairs in the session storage.

πŸ“¦ Storing and Retrieving Data

Here’s how you can store and retrieve data using sessionStorage:

javascript
Copied
Copy To Clipboard
// Storing data
sessionStorage.setItem('username', 'JohnDoe');

// Retrieving data
const username = sessionStorage.getItem('username');
console.log(username); // Output: JohnDoe

πŸ—‘οΈ Removing Data

You can remove individual items or clear all data from sessionStorage:

javascript
Copied
Copy To Clipboard
// Removing a specific item
sessionStorage.removeItem('username');

// Clearing all sessionStorage data
sessionStorage.clear();

⚠️ Common Pitfalls

  1. Data Persistence: Remember that sessionStorage data is not persistent beyond the session. It will be lost when the page is closed or when the session ends.
  2. Storage Limit: Session Storage typically has a storage limit of around 5MB. Exceeding this limit may lead to errors.
  3. Cross-Tab Communication: Data stored in sessionStorage is not shared across different tabs or windows. Each tab or window has its own sessionStorage.

πŸ“ Example Usage

Here’s a simple example of using sessionStorage to save and retrieve user preferences:

HTML
Copied
Copy To Clipboard
<!DOCTYPE html>
<html>
<head>
  <title>Session Storage Example</title>
</head>
<body>
  <h1>Session Storage Example</h1>
  <input type="text" id="input" placeholder="Enter your name">
  <button id="save">Save</button>
  <button id="load">Load</button>
  <p id="result"></p>

  <script>
    document.getElementById('save').addEventListener('click', () => {
      const input = document.getElementById('input').value;
      sessionStorage.setItem('userName', input);
    });

    document.getElementById('load').addEventListener('click', () => {
      const userName = sessionStorage.getItem('userName');
      document.getElementById('result').textContent = userName ? `Hello, ${userName}` : 'No name saved';
    });
  </script>
</body>
</html>

πŸŽ‰ Conclusion

Session Storage is a useful tool for storing data temporarily during a web session. It provides a straightforward way to manage data that only needs to persist until the user closes the browser or tab. By understanding and using sessionStorage effectively, you can enhance the functionality and user experience of your web applications.

πŸ‘¨β€πŸ’» Join our Community:

To get interesting news and instant updates on Front-End, Back-End, CMS and other Frameworks. Please Join the Telegram Channel:

Author

author
πŸ‘‹ Hey, I'm Mari Selvan

For over eight years, I worked as a full-stack web developer. Now, I have chosen my profession as a full-time blogger at codetofun.com.

Buy me a coffee to make codetofun.com free for everyone.

Buy me a Coffee

Share Your Findings to All

Subscribe
Notify of
guest
1 Comment
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
We make use of cookies to improve our user experience. By using this website, you agree with our Cookies Policy
AgreeCookie Policy