Local / Session Storage

Definition

Web Storage APIs that provide mechanisms by which browsers can store key/value pairs in a much more intuitive fashion than using cookies. LocalStorage persists permanently. SessionStorage clears when the tab is closed.

Explain Like I'm New

LocalStorage is a notebook you keep on your desk. Even if you go to sleep and restart your computer, the notes are still there. SessionStorage is a whiteboard. It's great while you're working, but as soon as you close the door (close the tab), the janitor wipes it clean.

Real World Example

Storing the user's Dark/Light mode preference in `localStorage` so the site remembers their choice on their next visit a month from now.

Common Use Cases

•Persisting user preferences
•Caching non-sensitive API data temporarily
•Shopping carts for guest users

Interactive Example

Console output will appear here...

Interview Questions

basic

How much data can you store in LocalStorage?

intermediate

Can you store JavaScript Objects in LocalStorage?

advanced

Is LocalStorage synchronous or asynchronous, and why does it matter?

Flash Cards

Question

Can you store objects?

Click to reveal answer

Answer

No. LocalStorage ONLY stores Strings. If you pass an object, it will save as `"[object Object]"`. You must use `JSON.stringify(obj)` when saving, and `JSON.parse(str)` when reading.

Question

Is it synchronous or async?

Click to reveal answer

Answer

It is completely synchronous. If you try to read or write a massive 5MB string to LocalStorage, it will block the main thread and freeze the UI until it finishes. For huge data, use IndexedDB.