Web Storage

🗄️ Web Storage: Your Browser’s Memory Box

The Story of Remembering Things

Imagine you have a magical locker at school. Every day when you come back, your stuff is still there! But wait—there’s also a temporary pocket that empties when you leave.

That’s exactly how Web Storage works in your browser!

🏠 Meet the Storage Family

Your browser has three ways to remember things:

graph TD
    A["Web Storage Family"] --> B["localStorage"]
    A --> C["sessionStorage"]
    A --> D["Cookies"]
    B --> E["Forever Locker 🔒"]
    C --> F["Temporary Pocket 👜"]
    D --> G["Tiny Notes 📝"]

📦 localStorage — The Forever Locker

Think of it like: A locker that keeps your stuff FOREVER (until you clean it out).

What Makes It Special?

• ✅ Data stays even after closing the browser
• ✅ Holds about 5MB of data (like 5 million letters!)
• ✅ Same data across all tabs of the same website

How to Use It

Saving something:

// Save your favorite color
localStorage.setItem('color', 'blue');

// Save your name
localStorage.setItem('name', 'Alex');

Getting it back:

// Get your color back
let myColor = localStorage.getItem('color');
// myColor is now 'blue'

Removing something:

// Remove just one item
localStorage.removeItem('color');

// Clear EVERYTHING
localStorage.clear();

Real-Life Example 🎮

When you set “Dark Mode” on a website and come back next week—it remembers! That’s localStorage!

📱 sessionStorage — The Temporary Pocket

Think of it like: A pocket that empties when you leave the room.

What Makes It Different?

• ⏰ Data disappears when you close the tab
• 📑 Each tab has its OWN pocket (they don’t share!)
• 📦 Also holds about 5MB

How to Use It

Same commands as localStorage!

// Save something for this session
sessionStorage.setItem('cart', 'apple');

// Get it back
let item = sessionStorage.getItem('cart');

// Remove it
sessionStorage.removeItem('cart');

// Clear all
sessionStorage.clear();

When to Use It? 🛒

• Shopping cart items while browsing
• Form data you’re filling out
• Temporary quiz scores

🛠️ Storage Methods — Your Toolkit

Both localStorage and sessionStorage share the same tools:

💡 Important Secret!

Storage only saves strings! Want to save an object?

// Saving an object
let user = {name: 'Sam', age: 12};
localStorage.setItem('user',
  JSON.stringify(user));

// Getting it back
let savedUser = JSON.parse(
  localStorage.getItem('user')
);

📢 Storage Event — When Things Change

Think of it like: A doorbell that rings when someone changes your locker!

How It Works

When localStorage changes in another tab, your tab gets notified!

window.addEventListener('storage',
  function(event) {
    console.log('Something changed!');
    console.log('Key:', event.key);
    console.log('Old:', event.oldValue);
    console.log('New:', event.newValue);
});

The Event Tells You:

• key — Which item changed
• oldValue — What it was before
• newValue — What it is now
• url — Which page made the change
• storageArea — localStorage or sessionStorage

🎯 Cool Use Case

If you log out in one tab, ALL your tabs can know and log out too!

🍪 Cookies — The Original Memory Notes

Think of it like: Tiny sticky notes that travel with you everywhere.

What Are Cookies?

• 📏 Very small (only 4KB each)
• 🚀 Sent to the server with every request
• ⏰ Can have expiration dates
• 🔒 Can be protected

Creating a Cookie

// Simple cookie
document.cookie = "username=Alex";

// Cookie with expiration (7 days)
let date = new Date();
date.setTime(date.getTime() +
  (7 * 24 * 60 * 60 * 1000));
document.cookie = "username=Alex;" +
  "expires=" + date.toUTCString();

Reading Cookies

// Get all cookies (one big string)
let allCookies = document.cookie;
// "username=Alex; theme=dark"

Deleting a Cookie

// Set expiration to past date
document.cookie =
  "username=; expires=Thu, 01 Jan 1970";

🏷️ Cookie Attributes — The Rules

Cookies can have special instructions:

graph TD
    A["Cookie Attributes"] --> B["expires/max-age"]
    A --> C["path"]
    A --> D["domain"]
    A --> E["secure"]
    A --> F["HttpOnly"]
    A --> G["SameSite"]

expires / max-age

When should the cookie disappear?

// Expires on a specific date
document.cookie = "name=Alex;" +
  "expires=Fri, 31 Dec 2025 23:59:59 GMT";

// Expires after 3600 seconds (1 hour)
document.cookie = "name=Alex;" +
  "max-age=3600";

path

Which pages can see this cookie?

// Only pages under /shop/ can see it
document.cookie = "cart=3; path=/shop/";

// All pages can see it
document.cookie = "theme=dark; path=/";

domain

Which website addresses can access it?

// Only this exact site
document.cookie = "user=Sam;" +
  "domain=example.com";

secure

Only send on HTTPS (safe connections)

document.cookie = "token=abc123;" +
  "secure";

HttpOnly

JavaScript can’t touch this cookie! (Only set by the server, for safety)

SameSite

Stop cookie from being sent to other sites

// Strict: only your site
document.cookie = "id=123; SameSite=Strict";

// Lax: some exceptions allowed
document.cookie = "id=123; SameSite=Lax";

// None: sent everywhere (needs Secure)
document.cookie = "id=123;" +
  "SameSite=None; Secure";

🏆 Quick Comparison

🎯 When to Use What?

graph TD
    A["What do you need?"] --> B{Sent to server?}
    B -->|Yes| C["Use Cookies 🍪"]
    B -->|No| D{Need it later?}
    D -->|Yes forever| E["localStorage 📦"]
    D -->|Just for now| F["sessionStorage 📱"]

Use localStorage for:

• 🎨 User preferences (theme, language)
• 📊 Game high scores
• 📝 Draft content

Use sessionStorage for:

• 🛒 Shopping cart during browsing
• 📋 Form data being filled
• 🔢 One-time codes

Use Cookies for:

• 🔐 Login sessions
• 📈 Analytics tracking
• 🎯 Personalization that needs server access

🚀 You Did It!

Now you understand how browsers remember things:

1. localStorage — Forever memory, lots of space
2. sessionStorage — Temporary memory, per tab
3. Storage methods — setItem, getItem, removeItem, clear
4. Storage events — Know when things change
5. Cookies — Tiny notes that travel to the server
6. Cookie attributes — Control who, when, where

You’re now a Web Storage Master! 🎉