What is localStorage and how is it related to HTML?

Difficulty: 4/10

Web Storage API, client-side persistence, security & quota

Understanding localStorage in HTML

localStorage is a feature of the Web Storage API that allows websites to store key–value pairs in a user's browser. Unlike cookies, the data stored in localStorage does not get sent to the server with every request, and it persists even after the browser is closed and reopened. This makes it useful for saving user preferences, session states, or small amounts of application data.

Example of Using localStorage

Key Points About localStorage

1
Stores data as key–value pairs in the browser.
2
Data persists even after the page is closed or reloaded.
3
Has a storage limit of about 5–10 MB (much larger than cookies).
4
Only accessible from the same domain that stored it.
5
Useful for preferences, cached data, or offline apps.

Scenario Questions

0-2 years experience

1We need to store a user's theme preference (dark or light) so it persists across page reloads. How would you use localStorage to implement this, and what code would you write to read and write the value?
2If a user clears their browser data, what happens to data you saved in localStorage? How would you handle that case in a small app?
3What size limits should you be aware of when using localStorage for a simple key‑value pair?

Follow-up Questions

What are the main limitations of localStorage you need to keep in mind?
How would you test that your localStorage usage works across different browsers?
Can you describe a situation where localStorage would be a poor choice for storing data?