~ Contribute

Suggest a correction or improvement. The author reviews it before it goes live.

Comment0 / 300

en/tutorials/js/32js-local-storage-json

# JavaScript Local Storage & JSON

Persist data in the browser using storage APIs.

## LocalStorage

```javascript
localStorage.setItem("key", "value");
let value = localStorage.getItem("key");
localStorage.removeItem("key");
localStorage.clear();
```

**Remember:** `localStorage` stores strings only. Use `JSON.stringify()` and `JSON.parse()` for objects.

## SessionStorage

Same API as `localStorage`, but cleared when the tab closes.

```javascript
sessionStorage.setItem("key", "value");
let value = sessionStorage.getItem("key");
```

**Tip:** Use `sessionStorage` for temporary data like form drafts or single-session tokens.

## JSON Storage

```javascript
let user = { name: "John", age: 25 };
localStorage.setItem("user", JSON.stringify(user));
let stored = JSON.parse(localStorage.getItem("user"));
```

Always re-stringify after modifying — `JSON.parse()` returns a copy, not a reference.

## Shopping Cart Example

```javascript
class CartManager {
  #key = "cart";
  #get() { let d = localStorage.getItem(this.#key); return d ? JSON.parse(d) : []; }
  #save(cart) { localStorage.setItem(this.#key, JSON.stringify(cart)); }

addItem(item) { let c = this.#get(); c.push(item); this.#save(c); }
  removeItem(id) { this.#save(this.#get().filter(i => i.id !== id)); }
  getTotal() { return this.#get().reduce((s, i) => s + i.price * i.quantity, 0); }
}
```

## User Preferences Example

```javascript
class PreferencesManager {
  #key = "preferences";
  #get() { let d = localStorage.getItem(this.#key); return d ? JSON.parse(d) : {}; }
  #save(p) { localStorage.setItem(this.#key, JSON.stringify(p)); }

get(key) { return this.#get()[key]; }
  set(key, value) { let p = this.#get(); p[key] = value; this.#save(p); }

load() {
    if (Object.keys(this.#get()).length === 0) {
      this.set("theme", "light");
      this.set("language", "en");
    }
  }
}
```

## Session Manager Example

```javascript
class SessionManager {
  #key = "session";

create(userData) {
    let session = { user: userData, expiresAt: new Date(Date.now() + 86400000) };
    localStorage.setItem(this.#key, JSON.stringify(session));
  }

get() {
    let d = localStorage.getItem(this.#key);
    if (!d) return null;
    let s = JSON.parse(d);
    if (s.expiresAt < new Date()) { this.destroy(); return null; }
    return s;
  }

destroy() { localStorage.removeItem(this.#key); }
}
```

## Best Practices

- **Use JSON.stringify/parse** — For storing objects
- **Use localStorage for persistent data** — sessionStorage for temporary
- **Handle errors** — Storage might be full or disabled
- **Keep data small** — Storage is limited (~5MB)

## Common Mistakes

- **Forgetting JSON.stringify** — Storing `[object Object]`
- **Storing sensitive data** — Never store passwords in localStorage
- **Not handling errors** — Storage may fail silently
- **Using localStorage for auth** — Validate sessions server-side

No changes yet

cancel