Suggest an edit

Improve this article

Refine the answer for “What does sessionStorage do?”. Your changes go to moderation before they’re published.

Approval required

Content

What you’re changing

Title (EN)

Short answer (EN)

Shown above the full answer for quick recall.

Answer (EN)

## Definition

> `sessionStorage` is a browser object that stores "key-value" pairs (strings)
> only **while the current tab (or window) is open**.
> Once the tab is closed, the data is automatically removed.

Put simply:
it is **temporary storage**, available only within a single tab and domain.

---

## 1. A simple example

```javascript
// Save data
sessionStorage.setItem('user', 'Tim');

// Read data
console.log(sessionStorage.getItem('user')); // "Tim"

// Remove one item
sessionStorage.removeItem('user');

// Clear the whole storage
sessionStorage.clear();
```

---

## 2. Difference from localStorage

| Storage | Lifetime | Shared between tabs | Cleared on close |
|---|---|---|---|
| **localStorage** | Permanent (until cleared manually) | Yes (between tabs of the same domain) | No |
| **sessionStorage** | While the tab is open | No (each tab has its own) | Yes |

In other words, if a user opens your site in a new tab,
they get a **new, empty** `sessionStorage`.

---

## 3. All the methods are the same as localStorage

| Method | What it does | Example |
|---|---|---|
| `setItem(key, value)` | Saves a value | `sessionStorage.setItem('token', 'abc')` |
| `getItem(key)` | Returns a value | `sessionStorage.getItem('token')` |
| `removeItem(key)` | Removes an item | `sessionStorage.removeItem('token')` |
| `clear()` | Clears everything | `sessionStorage.clear()` |
| `key(index)` | Returns the key at an index | `sessionStorage.key(0)` |
| `length` | Number of entries | `sessionStorage.length` |

---

## 4. Example: form data kept while the tab is open

```javascript
<input id="name" placeholder="Name" />

// Restore the value on page reload
  input.value = sessionStorage.getItem('name') || '';

// Save on change
  input.addEventListener('input', () => {
    sessionStorage.setItem('name', input.value);
  });
</script>
```

Now the entered name survives a page reload,
but if you close the tab and open the site again, the field clears.

---

## 5. Example: storing data for a single authorization session only

```javascript
sessionStorage.setItem('sessionToken', 'abc123');

// the token survives a page reload
console.log(sessionStorage.getItem('sessionToken')); // "abc123"

// but disappears when the tab is closed
```

This is used when you need to store:

- a token or login state only until the window closes,
- temporary data (for example, form or filter state),
- data "drafts" that do not need to persist.

---

## 6. Important details

- Works only with **strings**, so for objects:

```javascript
  sessionStorage.setItem('user', JSON.stringify({ name: 'Tim' }));
  const user = JSON.parse(sessionStorage.getItem('user'));
  ```
- Storage capacity is roughly **5 MB**.
- Data is accessible only from **the same domain and tab**.
- You can use the `storage` event,
but it **does not fire** in the same window, only between tabs (which is usually irrelevant for sessionStorage).

---

## Summary

| Parameter | `localStorage` | `sessionStorage` |
|---|---|---|
| Storage lifetime | Forever (until cleared) | While the tab is open |
| Access between tabs | Yes | No |
| Cleared when the window closes | No | Yes |
| Capacity | ~5-10 MB | ~5 MB |
| Data type | Strings only | Strings only |
| Common use | Settings, themes, user data | Temporary sessions, forms, filters |

---

> **Remember it simply:**
>
> - `localStorage` is "forever",
> - `sessionStorage` is "while the tab is open".

Markdown · drag & drop images · ⌘B / ⌘I shortcuts537 words

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.