LocalStorage vs SessionStorage Explained — Store, Read and Clear Browser Data

// ─────────────────────────────────────────────
// Web Storage API — Getting Your Bearings
// Run this in your browser's DevTools console
// ─────────────────────────────────────────────

// Check that localStorage is available in this browser
if (typeof localStorage !== 'undefined') {
  console.log('localStorage is supported ✅');
} else {
  console.log('localStorage is NOT supported ❌');
}

// localStorage and sessionStorage live on the window object
// These two lines do exactly the same thing:
console.log(window.localStorage === localStorage); // true — same reference
console.log(window.sessionStorage === sessionStorage); // true — same reference

// Both storages have the same API methods:
// .setItem(key, value)  → save data
// .getItem(key)         → read data
// .removeItem(key)      → delete one item
// .clear()              → delete everything
// .length               → how many items are stored

console.log('localStorage item count:', localStorage.length);
console.log('sessionStorage item count:', sessionStorage.length);

// ─────────────────────────────────────────────
// Full CRUD with LocalStorage
// Realistic example: saving user preferences
// ─────────────────────────────────────────────

// ── CREATE (Save) ─────────────────────────────

// Saving a simple string — no conversion needed
localStorage.setItem('username', 'Alex');
localStorage.setItem('theme', 'dark');

// Saving a number — must convert to string
localStorage.setItem('loginCount', String(5));

// Saving an object — MUST use JSON.stringify()
const userPreferences = {
  language: 'en',
  notifications: true,
  fontSize: 16
};
localStorage.setItem('preferences', JSON.stringify(userPreferences));

console.log('Items saved! Total stored:', localStorage.length);


// ── READ (Retrieve) ───────────────────────────

const storedUsername = localStorage.getItem('username');
console.log('Username:', storedUsername); // 'Alex'

// Reading a key that doesn't exist returns null — always guard against this
const storedAvatar = localStorage.getItem('avatar');
console.log('Avatar (not set):', storedAvatar); // null

// Reading an object — MUST use JSON.parse() to convert back from string
const rawPreferences = localStorage.getItem('preferences');
const parsedPreferences = JSON.parse(rawPreferences);
console.log('Font size:', parsedPreferences.fontSize); // 16
console.log('Notifications on?', parsedPreferences.notifications); // true

// Safe pattern: handle the case where the item might not exist yet
const safePreferences = JSON.parse(localStorage.getItem('preferences')) || {};
console.log('Safe read result:', safePreferences);


// ── UPDATE (Overwrite) ────────────────────────

// setItem on an existing key simply overwrites it — no separate update method
localStorage.setItem('theme', 'light'); // was 'dark', now 'light'
console.log('Updated theme:', localStorage.getItem('theme')); // 'light'

// Updating a nested property inside a stored object:
const currentPrefs = JSON.parse(localStorage.getItem('preferences'));
currentPrefs.fontSize = 18; // change just this one property
localStorage.setItem('preferences', JSON.stringify(currentPrefs)); // save it back
console.log('Updated font size:', JSON.parse(localStorage.getItem('preferences')).fontSize); // 18


// ── DELETE (Remove) ───────────────────────────

// Remove one specific item
localStorage.removeItem('loginCount');
console.log('After removeItem, loginCount:', localStorage.getItem('loginCount')); // null

// Remove EVERYTHING stored by your site (use with caution!)
// localStorage.clear();
// console.log('After clear(), item count:', localStorage.length); // 0

// ─────────────────────────────────────────────
// SessionStorage — Tab-Scoped Temporary Storage
// Great example: saving a multi-step form draft
// ─────────────────────────────────────────────

// ── Saving form progress step by step ────────

// User fills in Step 1 of a signup form
const stepOneData = {
  firstName: 'Jordan',
  lastName: 'Rivera',
  email: 'jordan@example.com'
};
sessionStorage.setItem('signupStep1', JSON.stringify(stepOneData));
console.log('Step 1 saved to sessionStorage');

// User moves to Step 2
const stepTwoData = {
  plan: 'pro',
  billingCycle: 'annual'
};
sessionStorage.setItem('signupStep2', JSON.stringify(stepTwoData));
console.log('Step 2 saved to sessionStorage');

// ── Reading it back on page load ──────────────

// On any page reload within the same tab, this data is still here
const savedStep1 = JSON.parse(sessionStorage.getItem('signupStep1'));
if (savedStep1) {
  console.log('Resuming form for:', savedStep1.firstName, savedStep1.lastName);
} else {
  console.log('No saved form data — starting fresh');
}

// ── Checking the difference in scope ─────────

// Save something to BOTH storages so we can compare their lifespans
localStorage.setItem('persistentNote', 'I survive tab closes and restarts');
sessionStorage.setItem('temporaryNote', 'I disappear when this tab closes');

console.log('localStorage note:', localStorage.getItem('persistentNote'));
console.log('sessionStorage note:', sessionStorage.getItem('temporaryNote'));

// Now close this tab and open a new one to the same page...
// localStorage.getItem('persistentNote')  → still 'I survive tab closes and restarts'
// sessionStorage.getItem('temporaryNote') → null (it's gone)

// ── Cleanup after form submission ─────────────
function handleFormSubmissionSuccess() {
  // Once the user successfully submits, clean up the drafts
  sessionStorage.removeItem('signupStep1');
  sessionStorage.removeItem('signupStep2');
  console.log('Form submitted — draft data cleared from sessionStorage');
}

handleFormSubmissionSuccess();
console.log('Step1 after cleanup:', sessionStorage.getItem('signupStep1')); // null

// ─────────────────────────────────────────────
// The 'storage' Event — Syncing Tabs in Real Time
//
// HOW TO TEST THIS:
// 1. Open your site in Tab A and Tab B
// 2. Run this code in BOTH tabs
// 3. In Tab A, run: localStorage.setItem('cartCount', '3')
// 4. Watch Tab B's console react automatically
// ─────────────────────────────────────────────

// Listen for any localStorage change that originates from ANOTHER tab
window.addEventListener('storage', function(storageEvent) {

  // storageEvent contains useful info about what changed:
  console.log('Storage changed in another tab!');
  console.log('Key that changed:', storageEvent.key);        // e.g. 'cartCount'
  console.log('Old value:', storageEvent.oldValue);          // e.g. null
  console.log('New value:', storageEvent.newValue);          // e.g. '3'
  console.log('Which storage:', storageEvent.storageArea);   // localStorage object
  console.log('Origin:', storageEvent.url);                  // URL of the tab that changed it

  // React to a specific key changing
  if (storageEvent.key === 'cartCount') {
    const newCount = parseInt(storageEvent.newValue, 10);
    updateCartBadge(newCount); // call your UI update function
  }

  // React to the user logging out in another tab
  if (storageEvent.key === 'authToken' && storageEvent.newValue === null) {
    console.log('User logged out in another tab — redirecting to login page...');
    // window.location.href = '/login';
  }
});

// Simulated UI update function
function updateCartBadge(count) {
  console.log(`Cart badge updated to: ${count} item(s)`);
  // In a real app you'd do something like:
  // document.getElementById('cart-badge').textContent = count;
}

// Simulating a change from another tab (for demonstration):
// In the real scenario, Tab A does this:
localStorage.setItem('cartCount', '3');
// Tab B's 'storage' listener fires automatically — Tab A's does NOT.

console.log('This tab set cartCount. The storage event fires in OTHER tabs, not this one.');