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:

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