JavaScript Local Storage & JSON

Persist data in the browser using storage APIs.

LocalStorage

localStorage.setItem("key", "value");
let value = localStorage.getItem("key");
localStorage.removeItem("key");
localStorage.clear();

Remember: localStorage stores strings only. Use JSON.stringify() and JSON.parse() for objects.

SessionStorage

Same API as localStorage, but cleared when the tab closes.

sessionStorage.setItem("key", "value");
let value = sessionStorage.getItem("key");

Tip: Use sessionStorage for temporary data like form drafts or single-session tokens.

JSON Storage

let user = { name: "John", age: 25 };
localStorage.setItem("user", JSON.stringify(user));
let stored = JSON.parse(localStorage.getItem("user"));

Always re-stringify after modifying — JSON.parse() returns a copy, not a reference.

Shopping Cart Example

class CartManager {
  #key = "cart";
  #get() { let d = localStorage.getItem(this.#key); return d ? JSON.parse(d) : []; }
  #save(cart) { localStorage.setItem(this.#key, JSON.stringify(cart)); }

  addItem(item) { let c = this.#get(); c.push(item); this.#save(c); }
  removeItem(id) { this.#save(this.#get().filter(i => i.id !== id)); }
  getTotal() { return this.#get().reduce((s, i) => s + i.price * i.quantity, 0); }
}

User Preferences Example

class PreferencesManager {
  #key = "preferences";
  #get() { let d = localStorage.getItem(this.#key); return d ? JSON.parse(d) : {}; }
  #save(p) { localStorage.setItem(this.#key, JSON.stringify(p)); }

  get(key) { return this.#get()[key]; }
  set(key, value) { let p = this.#get(); p[key] = value; this.#save(p); }

  load() {
    if (Object.keys(this.#get()).length === 0) {
      this.set("theme", "light");
      this.set("language", "en");
    }
  }
}

Session Manager Example

class SessionManager {
  #key = "session";

  create(userData) {
    let session = { user: userData, expiresAt: new Date(Date.now() + 86400000) };
    localStorage.setItem(this.#key, JSON.stringify(session));
  }

  get() {
    let d = localStorage.getItem(this.#key);
    if (!d) return null;
    let s = JSON.parse(d);
    if (s.expiresAt < new Date()) { this.destroy(); return null; }
    return s;
  }

  destroy() { localStorage.removeItem(this.#key); }
}

Best Practices

• Use JSON.stringify/parse — For storing objects
• Use localStorage for persistent data — sessionStorage for temporary
• Handle errors — Storage might be full or disabled
• Keep data small — Storage is limited (~5MB)

Common Mistakes

• Forgetting JSON.stringify — Storing [object Object]
• Storing sensitive data — Never store passwords in localStorage
• Not handling errors — Storage may fail silently
• Using localStorage for auth — Validate sessions server-side