localStorage

localStorage is a browser storage mechanism used to store data persistently on the user's device.

Data stored in localStorage is not removed when the page reloads, the browser tab closes, or the browser session ends.

localStorage = Persistent key-value storage in the browser

One-line idea: localStorage = Persistent browser key-value storage for small, non-sensitive data.

Core Concepts

Why It Matters

Frontend applications sometimes need to remember small pieces of data across browser sessions.

localStorage is useful when the data should stay available even after the user closes and reopens the browser.

Common examples:

• theme settings
• language choices
• user preferences
• small non-sensitive cached values

Reload page -> data remains
Close tab -> data remains
Reopen browser -> data remains

Practical Examples

How to Use

localStorage provides simple methods for storing, reading, removing, and clearing data.

How to Use: Set Data

Use setItem() to store a value.

localStorage.setItem("theme", "dark");

Both the key and value are stored as strings.

How to Use: Get Data

Use getItem() to read a value.

const theme = localStorage.getItem("theme");

console.log(theme);

If the key exists, it returns the stored value.

How to Use: Remove One Item

Use removeItem() to delete a specific key.

localStorage.removeItem("theme");

This removes only the selected item.

How to Use: Clear All Data

Use clear() to remove all data stored in localStorage for that origin.

localStorage.clear();

Use this carefully because it deletes everything stored by the application in localStorage.

Storing Complex Data

localStorage stores only strings.

So arrays and objects must be converted into strings before storing.

Use JSON.stringify() while saving.

Use JSON.parse() while reading.

Storing Complex Data: Store Object

const preferences = {
  theme: "dark",
  language: "en",
};

localStorage.setItem("preferences", JSON.stringify(preferences));

Storing Complex Data: Read Object

const storedPreferences = localStorage.getItem("preferences");

const preferences = JSON.parse(storedPreferences);

console.log(preferences.theme);

Storing Complex Data: Store Array

const recentSearches = ["react", "typescript", "nextjs"];

localStorage.setItem("recentSearches", JSON.stringify(recentSearches));

Storing Complex Data: Read Array

const storedSearches = localStorage.getItem("recentSearches");

const recentSearches = JSON.parse(storedSearches);

console.log(recentSearches);

Data Persistence

Data stored in localStorage persists indefinitely.

It remains stored until:

• the user clears browser data
• the application removes it using removeItem()
• the application clears it using clear()

localStorage data does not expire automatically.

This makes it useful for long-lasting preferences, but risky for data that should expire or change frequently.

Limits and Behavior

Area	Behavior
Storage type	Key-value storage
Key format	String
Value format	String
Persistence	Stays across reloads, tab closes, and browser sessions
Size limit	Around 5MB per domain
Execution	Synchronous
Access	Available to JavaScript on the same origin

The size limit may differ depending on the browser and browser version.

Performance Considerations

localStorage is simple and fast for small data, but it can create performance issues when overused.

Important points:

• localStorage is synchronous
• frequent reads and writes can block the main thread
• large data can slow down access
• objects and arrays require JSON.stringify() and JSON.parse()
• serialization and deserialization can affect performance

Small data -> fine
Large or frequent updates -> performance risk

Avoid using localStorage as a large client-side database.

Security

localStorage is accessible through JavaScript running on the same origin.

This creates security concerns.

If the application has an XSS vulnerability, an attacker may read data stored in localStorage.

Important rules:

• do not store sensitive data
• do not store authentication tokens
• do not store personal information
• remember that data is stored in plaintext
• encrypt data only when necessary
• prefer safer storage choices for confidential information

localStorage is convenient, but not secure for secrets.

When to Use

Use localStorage for small, simple, non-sensitive data that should persist across sessions.

Good use cases:

• theme preference
• language preference
• UI settings
• feature flags
• small cached values
• data that does not need to be secret

Example:

localStorage.setItem("language", "en");

When Not to Use

Avoid localStorage when data is sensitive, large, or frequently changing.

Do not use it for:

• authentication tokens
• personal information
• confidential data
• large datasets
• highly secure data
• frequently updated data

If data is sensitive or large, localStorage is usually the wrong choice.

localStorage Table

Feature	localStorage
Purpose	Store persistent browser data
Data format	String key-value pairs
Persistence	Remains across browser sessions
Size	Around 5MB per domain
API type	Synchronous
Complex data	Requires JSON stringify and parse
Security risk	Vulnerable if XSS exists
Best for	Preferences and small non-sensitive data
Avoid for	Tokens, personal data, large data, frequent updates

Summary

localStorage = Persistent browser key-value storage for small, non-sensitive data.

Need to remember small data after browser closes? -> localStorage
Need to store objects? -> JSON.stringify and JSON.parse
Need to store secrets? -> Do not use localStorage
Need frequent or large updates? -> Avoid localStorage