localStorage allows storing key-value pairs in the browser that persist even after page refresh or reopening the browser.

Basic Methods

• localStorage.setItem(key, value) → Store a value.
• localStorage.getItem(key) → Retrieve a stored value.
• localStorage.removeItem(key) → Remove a specific item.
• localStorage.clear() → Remove all stored data.
• localStorage.length → Get the number of stored items.
• localStorage.key(index) → Get the key name by index.

// Store data
localStorage.setItem("username", "Alice");

// Retrieve data
const user = localStorage.getItem("username");
console.log(user); // "Alice"

// Remove specific data
localStorage.removeItem("username");

// Clear all stored data
localStorage.clear();

// Get number of stored items
console.log(localStorage.length);

// Get the key at a specific index
console.log(localStorage.key(0));

Storing Complex Data (Objects, Arrays)

localStorage only supports strings, so store objects/arrays as JSON.

const user = { name: "Alice", age: 25 };

// Store as JSON string
localStorage.setItem("user", JSON.stringify(user));

// Retrieve and parse back to object
const storedUser = JSON.parse(localStorage.getItem("user") || "{}");
console.log(storedUser.name); // "Alice"

Limitations

Pros

• Simple key-value storage.
• Persistent across sessions.
• No expiration time.

Cons

• String-only storage (requires JSON conversion for objects).
• Limited to ~5MB per domain.