JavaScript LocalStorage and SessionStorage

(Storing data in the browser that persists between page reloads or sessions)

What is Web Storage?

Web Storage is a browser feature that allows you to store key/value pairs in a web browser.

There are two types:

Type Lifespan Scope
localStorage Persistent (until manually cleared) Same-origin
sessionStorage Temporary (cleared on tab close) Same-tab only

Why Use Web Storage?

  • Save user preferences (e.g., theme)
  • Remember form input data
  • Save cart items in e-commerce
  • Avoid server calls for small data

localStorage: Persistent Storage

Set Item

localStorage.setItem("username", "John");

Get Item

const name = localStorage.getItem("username");
console.log(name); // John

Remove Item

localStorage.removeItem("username");

Clear All Storage

localStorage.clear();

sessionStorage: Temporary Storage

Works the same way as localStorage but data is lost when the browser tab is closed.

sessionStorage.setItem("sessionUser", "Alice");
const sessionUser = sessionStorage.getItem("sessionUser");
console.log(sessionUser); // Alice

Note on Data Types

Web Storage only stores strings.

To store objects/arrays, use JSON.stringify() and JSON.parse():

const user = { name: "Alex", age: 28 };
localStorage.setItem("user", JSON.stringify(user));
                                
const userData = JSON.parse(localStorage.getItem("user"));
console.log(userData.name); // Alex

Limitations of Web Storage

  • Storage limit: ~5MB per origin (varies by browser)
  • Only accessible on the same origin (protocol + domain + port)
  • Not secure for sensitive data — it's accessible via JavaScript
  • No expiration for localStorage unless manually removed

Common Use Cases

  • Save dark/light mode preference
  • Keep items in a shopping cart
  • Auto-fill form fields
  • Store temporary form draft

Summary

  • localStorage persists data until cleared manually.
  • sessionStorage clears when the tab is closed.
  • Use setItem(), getItem(), removeItem(), and clear() methods.
  • Store complex data (arrays/objects) using JSON methods.
  • Avoid storing sensitive or secure data.

🧪 Practice Exercise:

Task:

  1. Save a user's name to localStorage, and greet them on the next visit.
  2. Save a form draft to sessionStorage and restore it if the tab refreshes.
  3. Use JSON.stringify() to save an object in localStorage.
  4. Create a function to clear the saved data with a button click.
Previous Next