HTML Session Storage

Posted in HTML Tutorial

Updated on Sep 29, 2024

By Mari Selvan

👁️ 16 - Views

⏳ 4 mins

💬 1 Comment

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

// 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

// Removing a specific item
sessionStorage.removeItem('username');

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

⚠️ Common Pitfalls

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.
Storage Limit: Session Storage typically has a storage limit of around 5MB. Exceeding this limit may lead to errors.
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

<!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.