Suggest an edit

Improve this article

Refine the answer for “What does localStorage 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)

`localStorage` is the browser's built-in storage,
which lets you **keep data across page reloads**.
It's a simple way to store small amounts of data right in the user's browser.

---

## Definition

> `localStorage` is an object provided by the browser
> that lets you store "key-value" pairs (strings)
> in persistent storage on the client side.

Data in `localStorage`:

- **is not removed when the page refreshes**,
- **is available within the domain**,
- and **persists even after the browser is closed**.

---

## 1. The simplest example

```javascript
// Save a value
localStorage.setItem('username', 'Tim');

// Read a value
console.log(localStorage.getItem('username')); // "Tim"

// Remove one value
localStorage.removeItem('username');

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

---

## 2. Storage structure

`localStorage` stores everything as **strings**:

```javascript
localStorage.setItem('count', 10);
console.log(typeof localStorage.getItem('count')); // "string"
```

To store objects, you need to use `JSON.stringify()` and `JSON.parse()`:

```javascript
const user = { name: 'Tim', age: 25 };

localStorage.setItem('user', JSON.stringify(user));

const savedUser = JSON.parse(localStorage.getItem('user'));
console.log(savedUser.name); // "Tim"
```

---

## 3. The main `localStorage` methods

| Method | What it does | Example |
|---|---|---|
| `setItem(key, value)` | Saves a value | `localStorage.setItem('theme', 'dark')` |
| `getItem(key)` | Gets a value | `localStorage.getItem('theme')` |
| `removeItem(key)` | Removes an item | `localStorage.removeItem('theme')` |
| `clear()` | Completely clears the storage | `localStorage.clear()` |
| `key(index)` | Returns the key at an index | `localStorage.key(0)` |
| `length` | The number of entries in storage | `localStorage.length` |

---

## 4. Example: saving the site theme

```javascript
const toggle = document.querySelector('#toggle');

// On page load
if (localStorage.getItem('theme') === 'dark') {
  document.body.classList.add('dark');
}

// On click
toggle.addEventListener('click', () => {
  document.body.classList.toggle('dark');
  const theme = document.body.classList.contains('dark') ? 'dark' : 'light';
  localStorage.setItem('theme', theme);
});
```

Now the browser remembers the chosen theme,
and the next time the user visits, they see the same mode.

---

## 5. Difference from `sessionStorage`

| Storage | Lives until... | Available after a reload | Shared between tabs |
|---|---|---|---|
| `localStorage` | The user clears it themselves | Yes | Yes (the same domain) |
| `sessionStorage` | The tab stays open | No | No |

---

## 6. Limits and security

- The size of `localStorage` is limited (usually **5-10 MB**).
- It works **only with text data**.
- You cannot store passwords, tokens, or sensitive information in plain form.
- The data is available only within **the same domain** (per the same-origin rule).

---

## 7. Reacting to changes (between tabs)

If you open one site in two tabs and change `localStorage` in one,
the `storage` event fires in the other:

```javascript
window.addEventListener('storage', (event) => {
  console.log('localStorage change:', event.key, event.newValue);
});
```

---

## Summary

| What it does | Example |
|---|---|
| Stores data locally | `localStorage.setItem('key', 'value')` |
| Not cleared on reload | Yes |
| Accessible from any JS on the same domain | Yes |
| Stores only strings | Use `JSON.stringify()` |
| Security | Don't store sensitive data |
| Size | ~5 MB |

---

> **Remember it simply:**
> `localStorage` is like a "mini database" in the browser,
> where you can store settings, tokens, history, or application state,
> and retrieve them even after closing the tab.

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

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.