🗂️ Session Storage in JavaScript – Complete Tutorial

Session Storage is a Web Storage API that allows you to store data as key-value pairs in the browser. Unlike Local Storage, the data exists only for the current browser tab or window and is automatically removed when the tab is closed.

📌 What is Session Storage?

Session Storage is accessed using the sessionStorage object. It is useful for temporarily storing data needed during a user's current browsing session.

>>"Session Storage stores temporary data that lasts only for the current browser tab."

💡 Why Use Session Storage?

  • 📝 Save form data while filling a page
  • 🛒 Store temporary shopping cart information
  • 🔍 Preserve search filters during navigation
  • 📄 Store multi-step form progress
  • ⚡ Keep temporary application state

🛠 Session Storage Methods

MethodDescription
setItem()Stores a value.
getItem()Retrieves a value.
removeItem()Removes a specific item.
clear()Removes all stored items.
key()Returns the key at a given index.
lengthReturns the number of stored items.

📝 Storing Data

Use setItem() to save a value.

Store a Value

sessionStorage.setItem("username", "John");

📖 Reading Data

Read a Value

const username = sessionStorage.getItem("username");

console.log(username);

✏️ Updating Data

Updating is done by storing a new value using the same key.

Update a Value

sessionStorage.setItem("username", "Alice");

🗑️ Removing Data

Remove a Value

sessionStorage.removeItem("username");

🧹 Clearing All Data

Clear Session Storage

sessionStorage.clear();

📊 Checking the Number of Items

Length Property

console.log(sessionStorage.length);

🔑 Accessing Keys

Get Key

console.log(sessionStorage.key(0));

📦 Storing Objects

Session Storage stores only strings. Convert objects into JSON before saving.

Store an Object

const user = {
  name: "John",
  age: 25,
  city: "New York"
};

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

📥 Retrieving Objects

Retrieve an Object

const user = JSON.parse(
  sessionStorage.getItem("user")
);

console.log(user.name);
console.log(user.city);

📋 Storing Arrays

Store an Array

const colors = ["Red", "Green", "Blue"];

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

📤 Reading Arrays

Retrieve an Array

const colors = JSON.parse(
  sessionStorage.getItem("colors")
);

console.log(colors);

🛠 Helper Functions

Save Data

saveData()

function saveData(key, value) {
  sessionStorage.setItem(
    key,
    JSON.stringify(value)
  );
}

Load Data

loadData()

function loadData(key) {
  const data = sessionStorage.getItem(key);

  return data
    ? JSON.parse(data)
    : null;
}

Delete Data

deleteData()

function deleteData(key) {
  sessionStorage.removeItem(key);
}

🚀 Complete Example

Temporary User Session

const session = {
  username: "John",
  currentPage: "Dashboard",
  lastVisited: Date.now()
};

// Save
sessionStorage.setItem(
  "session",
  JSON.stringify(session)
);

// Read
const currentSession = JSON.parse(
  sessionStorage.getItem("session")
);

console.log(currentSession);

// Remove
sessionStorage.removeItem("session");

📊 Session Storage vs Local Storage vs Cookies

FeatureSession StorageLocal StorageCookies
Storage Limit~5 MB~5–10 MB~4 KB
LifetimeUntil tab closesUntil manually removedConfigurable
Shared Between Tabs❌ No✅ Yes✅ Yes
Sent to Server❌ No❌ No✅ Yes

⚠️ Limitations

  • 📦 Only strings can be stored directly.
  • 🚫 Data is lost when the browser tab or window is closed.
  • 🌐 Accessible only within the same origin (protocol, domain, and port).
  • 🔐 Not suitable for storing sensitive information.

Note

Session Storage is isolated per browser tab. Opening the same website in a new tab creates a separate Session Storage instance.

✅ Best Practices

  • 📄 Use it for temporary data only.
  • 🧠 Store objects and arrays using JSON.stringify().
  • 📥 Retrieve complex data using JSON.parse().
  • 🧹 Remove unused data with removeItem() or clear().
  • 🔒 Never store passwords or confidential information.

🎯 Summary

Session Storage is ideal for storing temporary browser data that should persist only during the current tab session. It offers the same API as Local Storage but automatically clears data when the tab or window is closed, making it perfect for temporary user state, multi-step forms, and session-specific information.