Skip to main content
HTML5ANDCSS3 logoHTML5ANDCSS3Tools and Tutorials

JavaScript Storage & BOM

JavaScript sessionStorage

Written by Published

sessionStorage behaves like localStorage but clears when the tab closes.

The methods are identical; only the lifetime differs.

Each tab also gets its own separate storage.

Example

Example

javascript

sessionStorage.setItem("step", "2");

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

The output is 2.

How It Differs

Data is cleared when the tab or window closes.

Each tab has its own storage, even for the same site.

The methods are exactly the same as localStorage.

Syntax

Syntax

javascript

sessionStorage.setItem("key", "value");

Swap localStorage for sessionStorage and nothing else changes.

The Same API

Every method from localStorage works identically here.

Example

Example

javascript

sessionStorage.setItem("a", "1");

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

sessionStorage.removeItem("a");

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

Nothing about the interface changes, only the lifetime.

Multi-Step Forms

This is the classic use case.

Example

Example

javascript

sessionStorage.setItem("formStep1", JSON.stringify({ name: "Ada" }));

const saved = JSON.parse(sessionStorage.getItem("formStep1"));

console.log(saved.name);

If the visitor closes the tab, the half-finished form is gone, which is usually right.

Separate Per Tab

Two tabs on the same site each have their own sessionStorage.

This is different from localStorage, which is shared.

Example

Example

javascript

sessionStorage.setItem("tabId", "one");

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

A second tab opened separately would not see this value.

Choosing Between Them

Use sessionStorage for data that should not outlive the visit.

Use localStorage for preferences that should persist.

Example

Example

javascript

localStorage.setItem("theme", "dark");
sessionStorage.setItem("currentStep", "3");

console.log(localStorage.getItem("theme"));
console.log(sessionStorage.getItem("currentStep"));

Both can be used side by side for different purposes.

Also Just Strings

The same rule applies as with localStorage.

Example

Example

javascript

sessionStorage.setItem("count", 5);

console.log(typeof sessionStorage.getItem("count"));

The output is string, not number.

Complete Example

Complete Example

html

<!DOCTYPE html>
<html>
<head>
  <title>JavaScript sessionStorage</title>
</head>
<body>

  <h1>sessionStorage</h1>

  <p id="out"></p>

  <script>
    let visits = Number(sessionStorage.getItem("visits") || 0);
    visits = visits + 1;
    sessionStorage.setItem("visits", visits);

    document.getElementById("out").textContent =
      "Page views this tab session: " + visits;
  </script>

</body>
</html>

Try It Yourself

Run the above example in the Try It Editor.

Try reloading:

Reload the page a few times and watch the count rise.

Important Points

  • sessionStorage clears when the tab closes.
  • Each tab has its own separate storage.
  • The methods are identical to localStorage.
  • It suits multi-step forms and temporary state.
  • Values are still always strings.

Conclusion

sessionStorage is localStorage with a shorter memory.

The choice between them is entirely about how long the data should live.

Both can be used together for different kinds of state.

PreviousJavaScript localStorageNextJavaScript Storing Objects