Skip to content

Session Storage

This lesson explains Session Storage in JavaScript with beginner-friendly examples, practical use cases, and clear best practices.

JavaScript Session Storage Overview

JavaScript Session Storage is a browser storage feature that saves key-value data for the duration of a page session. Data stored in sessionStorage remains available while the browser tab is open, but it is cleared automatically when the tab or window is closed.

Session Storage is useful for temporary data such as multi-step form progress, checkout steps, tab-specific filters, temporary login state, search values, page state, and short-lived UI preferences. Like Local Storage, Session Storage stores values as strings, so objects and arrays should be converted using JSON.stringify() and read back using JSON.parse().

Session Storage Concept Description Common Usage
sessionStorage Stores data for the current browser tab session. Temporary page state.
setItem() Saves a key-value pair. Save form step or filter.
getItem() Reads a value by key. Restore tab-specific data.
removeItem() Removes one stored key. Clear one temporary value.
clear() Removes all Session Storage data for the tab. Reset temporary state.
JSON.stringify() Converts objects and arrays into strings. Store structured session data.
JSON.parse() Converts stored JSON strings back into JavaScript values. Read structured session data.

JavaScript Session Storage Example

const checkoutStep = {
  step: 2,
  shippingMethod: "standard",
  giftWrap: false
};

sessionStorage.setItem("checkoutStep", JSON.stringify(checkoutStep));

const storedStep = sessionStorage.getItem("checkoutStep");

const parsedStep = JSON.parse(storedStep);

console.log(parsedStep.step);

sessionStorage.setItem("searchTerm", "javascript");

console.log(sessionStorage.getItem("searchTerm"));

This example stores temporary checkout data as a JSON string, reads it back, parses it into a JavaScript object, and also saves a simple search value for the current tab session.

Top 10 JavaScript Session Storage Examples

The following examples show common Session Storage patterns used for temporary browser-tab data in modern JavaScript applications.

# Example Syntax
1 Save String sessionStorage.setItem("search", "laptop");
2 Read String const search = sessionStorage.getItem("search");
3 Remove Item sessionStorage.removeItem("search");
4 Clear Session Storage sessionStorage.clear();
5 Save Object sessionStorage.setItem("user", JSON.stringify(user));
6 Read Object const user = JSON.parse(sessionStorage.getItem("user"));
7 Save Array sessionStorage.setItem("filters", JSON.stringify(filters));
8 Read Array const filters = JSON.parse(sessionStorage.getItem("filters")) || [];
9 Check Existing Key if (sessionStorage.getItem("draft")) { restoreDraft(); }
10 Get Storage Length const totalItems = sessionStorage.length;

Best Practices

  • Use Session Storage for temporary data that should disappear when the tab closes.
  • Use JSON.stringify() before storing objects or arrays.
  • Use JSON.parse() when reading stored objects or arrays.
  • Provide fallback values when a key does not exist.
  • Use clear key names such as checkoutStep, filters, or draft.
  • Remove temporary values when the workflow is completed.
  • Use try...catch when parsing stored JSON data.
  • Avoid storing passwords, private tokens, or sensitive personal data.

Common Mistakes

  • Expecting Session Storage data to remain after the browser tab is closed.
  • Trying to store objects directly without JSON.stringify().
  • Forgetting that Session Storage stores only strings.
  • Using JSON.parse() without handling missing or invalid values.
  • Storing sensitive information in browser storage.
  • Using Session Storage when long-term persistence requires Local Storage or server storage.
  • Calling sessionStorage.clear() and removing unrelated temporary data.

Key Takeaways

  • Session Storage stores key-value data for one browser tab session.
  • Data is cleared when the tab or window is closed.
  • setItem() saves data and getItem() reads data.
  • removeItem() deletes one key and clear() deletes all keys.
  • Objects and arrays must be converted to JSON strings before storage.
  • Session Storage is useful for temporary forms, filters, checkout steps, and page state.
  • Do not store sensitive information in Session Storage.

Pro Tip

Use Session Storage for temporary tab-specific data and Local Storage for longer-lasting preferences. For sensitive or important data, use secure server-side storage instead of browser storage.

You now understand JavaScript Session Storage, including setItem(), getItem(), removeItem(), clear(), JSON storage, temporary page state, best practices, and common mistakes. Continue to the next lesson to learn JavaScript Cookies.