Skip to content

Local Storage

This lesson explains Local Storage in JavaScript with beginner-friendly examples, practical use cases, and clear best practices.

JavaScript Local Storage Overview

JavaScript Local Storage is a browser storage feature that allows websites to save key-value data in the user's browser. Data stored in localStorage remains available even after the browser tab is closed, the page is refreshed, or the browser is reopened.

Local Storage is commonly used for saving theme preferences, user settings, shopping cart items, form drafts, tokens, language choices, recently viewed items, and small application state. It stores only string values, so objects and arrays must be converted using JSON.stringify() and read back using JSON.parse().

Local Storage Concept Description Common Usage
localStorage Stores data in the browser with no automatic expiration. Preferences and small app state.
setItem() Saves a key-value pair. Save theme, user, cart.
getItem() Reads a value by key. Load saved settings.
removeItem() Removes one saved key. Logout or clear one setting.
clear() Removes all Local Storage data for the origin. Reset app storage.
JSON.stringify() Converts objects and arrays into strings. Store structured data.
JSON.parse() Converts stored JSON strings back into JavaScript values. Read objects and arrays.

JavaScript Local Storage Example

const user = {
  name: "John",
  role: "Developer",
  active: true
};

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

const storedUser = localStorage.getItem("user");

const parsedUser = JSON.parse(storedUser);

console.log(parsedUser.name);

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

console.log(localStorage.getItem("theme"));

This example stores a JavaScript object using JSON.stringify(), reads it back with getItem(), converts it using JSON.parse(), and also stores a simple string preference.

Top 10 JavaScript Local Storage Examples

The following examples show the most common Local Storage patterns used in real websites and JavaScript applications.

# Example Syntax
1 Save String localStorage.setItem("theme", "dark");
2 Read String const theme = localStorage.getItem("theme");
3 Remove Item localStorage.removeItem("theme");
4 Clear All Storage localStorage.clear();
5 Save Object localStorage.setItem("user", JSON.stringify(user));
6 Read Object const user = JSON.parse(localStorage.getItem("user"));
7 Save Array localStorage.setItem("cart", JSON.stringify(cartItems));
8 Read Array const cart = JSON.parse(localStorage.getItem("cart")) || [];
9 Check Existing Key if (localStorage.getItem("token")) { showDashboard(); }
10 Get Storage Length const totalItems = localStorage.length;

Best Practices

  • Use Local Storage for small, non-sensitive data.
  • Use JSON.stringify() before storing objects or arrays.
  • Use JSON.parse() when reading stored objects or arrays.
  • Provide fallback values when a key does not exist.
  • Use clear key names such as theme, cart, or userSettings.
  • Remove unused keys when they are no longer needed.
  • Handle invalid JSON with try...catch when reading complex data.
  • Avoid storing passwords, private tokens, or highly sensitive information in Local Storage.

Common Mistakes

  • Trying to store objects directly without JSON.stringify().
  • Forgetting that Local Storage stores values as strings.
  • Using JSON.parse() on a missing or invalid value without handling errors.
  • Storing sensitive user data in Local Storage.
  • Calling localStorage.clear() and accidentally removing unrelated app data.
  • Not checking whether the browser supports storage in restricted modes.
  • Using Local Storage for large datasets instead of IndexedDB or server storage.

Key Takeaways

  • Local Storage stores key-value data in the browser.
  • Stored data remains available after refresh and browser restart.
  • setItem() saves data and getItem() reads data.
  • removeItem() deletes one key and clear() deletes all keys.
  • Objects and arrays must be stored as JSON strings.
  • Local Storage is useful for preferences, carts, drafts, and small app state.
  • Do not store sensitive information in Local Storage.

Pro Tip

Use Local Storage for simple preferences and small app state, but avoid storing sensitive data such as passwords, private tokens, or personal information because browser storage can be accessed by JavaScript running on the same site.

You now understand JavaScript Local Storage, including setItem(), getItem(), removeItem(), clear(), JSON storage, common use cases, best practices, and mistakes to avoid. Continue to the next lesson to learn JavaScript Session Storage.