Suggest an edit

Improve this article

Refine the answer for “sessionStorage”. 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)

**`sessionStorage` is a browser object that stores string key and value pairs only while the current tab or window is open.** Put simply, it is temporary storage scoped to a single tab and a single origin; once the tab is closed the data is deleted automatically.

## Theory

### TL;DR

- `sessionStorage` lives exactly as long as the tab stays open.
- Every tab has its own storage, the data is not shared between tabs.
- The data survives a page reload, but not closing the tab.
- The API is the same as `localStorage`: `setItem`, `getItem`, `removeItem`, `clear`, `key`, `length`.
- It stores strings only, objects must be serialized with `JSON`.
- The quota is roughly 5 MB and access is limited to the same origin.

### Quick example

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

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

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

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

### The difference from localStorage

| Storage | Lifetime | Data shared between tabs | Cleared on close |
| --- | --- | --- | --- |
| **localStorage** | Permanent, until cleared manually | Yes, across tabs of one origin | No |
| **sessionStorage** | While the tab is open | No, every tab has its own | Yes |

In other words, if the user opens your site in a new tab, that tab gets a fresh, empty `sessionStorage`.

### The methods are the same as in localStorage

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

### Example: form data that lives while the tab is open

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

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

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

Now the typed name survives a page refresh, but if you close the tab and open the site again, the field is empty.

### Example: data for a single authentication session

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

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

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

It is used when you need to keep:

- a token or sign in state only until the window is closed;
- temporary data, for example form or filter state;
- drafts that do not need to be persistent.

### Important details and summary

- It works with strings only, so for objects:

```javascript
  sessionStorage.setItem('user', JSON.stringify({ name: 'Tim' }));
  const user = JSON.parse(sessionStorage.getItem('user'));
  ```

- The storage quota is roughly 5 MB.
- Only the same origin and the same tab can reach the data.
- You can listen to the `storage` event, but it does not fire in the same window, only across tabs, which is usually irrelevant for `sessionStorage`.

| Property | `localStorage` | `sessionStorage` |
| --- | --- | --- |
| Retention | Forever, until cleared | While the tab is open |
| Access across tabs | Yes | No |
| Cleared when the window closes | No | Yes |
| Size | About 5-10 MB | About 5 MB |
| Data type | Strings only | Strings only |
| Common use | Settings, themes, user data | Temporary sessions, forms, filters |

In short: `localStorage` means "forever", `sessionStorage` means "while the tab is open".

### Common mistakes

- **Expecting the data to be in every tab.** A second tab of the same site gets its own empty storage, nothing is shared.
- **Confusing the browser "session" with a server session.** `sessionStorage` has nothing to do with a server side session and is never sent to the backend.
- **Assuming a reload wipes the data.** A page reload, and even tab restore after a browser crash, keeps the storage; it is closing the tab that clears it.
- **Putting an object in directly.** Without `JSON.stringify()` you store the string `"[object Object]"`.
- **Counting on the `storage` event in the same tab.** It does not fire there, reacting to your own writes needs your own call or an application event.
- **Keeping valuable tokens there and calling it safe.** The data is still readable by any script on the page, a shorter lifetime does not protect against XSS.

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

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.