HtmlConceptBeginner · 3 min read

What is Session Storage in HTML5: Simple Explanation and Example

In HTML5, sessionStorage is a web storage object that lets you save data for the duration of a page session. This data is cleared automatically when the browser tab or window is closed, making it useful for temporary storage during a visit.

⚙️

How It Works

Think of sessionStorage as a small notebook that your browser keeps for each tab or window. When you open a new tab, it gets its own notebook. You can write notes (data) in this notebook, and as long as you keep the tab open, the notes stay there.

Once you close the tab or window, the notebook is thrown away, so the notes disappear. This means sessionStorage keeps data only while you are actively using that tab, unlike cookies or localStorage which can last longer.

This makes sessionStorage perfect for storing temporary information like form inputs or user choices that don't need to be saved after the session ends.

💻

Example

This example shows how to save, retrieve, and remove data using sessionStorage. Open the page, click the buttons, and watch the messages update.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Session Storage Example</title>
</head>
<body>
  <h1>Session Storage Demo</h1>
  <button id="saveBtn">Save Name</button>
  <button id="showBtn">Show Name</button>
  <button id="removeBtn">Remove Name</button>
  <p id="message">No name saved yet.</p>

  <script>
    const saveBtn = document.getElementById('saveBtn');
    const showBtn = document.getElementById('showBtn');
    const removeBtn = document.getElementById('removeBtn');
    const message = document.getElementById('message');

    saveBtn.addEventListener('click', () => {
      sessionStorage.setItem('name', 'Alice');
      message.textContent = 'Name saved!';
    });

    showBtn.addEventListener('click', () => {
      const name = sessionStorage.getItem('name');
      if (name) {
        message.textContent = `Saved name is: ${name}`;
      } else {
        message.textContent = 'No name found in session storage.';
      }
    });

    removeBtn.addEventListener('click', () => {
      sessionStorage.removeItem('name');
      message.textContent = 'Name removed from session storage.';
    });
  </script>
</body>
</html>

Output

Page with three buttons labeled 'Save Name', 'Show Name', and 'Remove Name'. Below is a message area that updates to show 'Name saved!', 'Saved name is: Alice', or 'Name removed from session storage.' depending on button clicks.

🎯

When to Use

Use sessionStorage when you want to keep data only while the user is on your site in a single tab or window. It is great for:

Saving form data temporarily so users don’t lose input if they reload the page.
Storing user choices or settings that don’t need to persist after closing the tab.
Keeping track of temporary state during a multi-step process or checkout flow.

It is not suitable for long-term storage or sharing data between tabs because it clears when the tab closes and is unique per tab.

✅

Key Points

sessionStorage stores data only for the current tab session.
Data is cleared automatically when the tab or window closes.
It stores data as key-value pairs in strings.
It is separate from localStorage, which keeps data even after closing the browser.
Useful for temporary data that should not persist beyond the session.

✅

Key Takeaways

sessionStorage saves data only for the current browser tab session and clears it when the tab closes.

It is ideal for temporary data like form inputs or user choices during a visit.

Data is stored as string key-value pairs accessible via JavaScript.

sessionStorage is separate from localStorage, which persists data longer.

Use sessionStorage when you want data to disappear after the user closes the tab.