LocalStorage vs SessionStorage — Cart Lost on New Tab Open

// ─────────────────────────────────────────────
// 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.');

// ─────────────────────────────────────────────
// Handling Quota Exceeded & Private Browsing
// ─────────────────────────────────────────────

// ── Safely write to localStorage ─────────────
function safeSetItem(key, value) {
  try {
    localStorage.setItem(key, value);
    return true;
  } catch (e) {
    if (e.name === 'QuotaExceededError') {
      console.warn('Storage full — consider clearing old data or using in-memory fallback');
      // Option: prompt user to clear storage
    } else if (e.name === 'SecurityError') {
      console.warn('Storage unavailable (private browsing?) — using in-memory fallback');
      // Fallback: save to a JavaScript object in memory
    }
    return false;
  }
}

// ── Calculate current storage usage ──────────
function getStorageUsage(storage) {
  let totalLength = 0;
  for (let i = 0; i < storage.length; i++) {
    const key = storage.key(i);
    const value = storage.getItem(key);
    totalLength += key.length + value.length;
  }
  return totalLength; // characters (UTF-16)
}

console.log('Current localStorage usage (chars):', getStorageUsage(localStorage));

// ── Clear old items by key pattern ───────────
// Example: remove all keys starting with 'log_'
function clearMatching(pattern) {
  const keysToRemove = [];
  for (let i = 0; i < localStorage.length; i++) {
    const key = localStorage.key(i);
    if (key.startsWith(pattern)) {
      keysToRemove.push(key);
    }
  }
  keysToRemove.forEach(key => localStorage.removeItem(key));
  console.log(`Removed ${keysToRemove.length} keys matching '${pattern}'`);
}

clearMatching('log_');

// ─────────────────────────────────────────────
// Security Note: Never store secrets in Web Storage
// ─────────────────────────────────────────────

// ❌ DANGEROUS: Never do this
localStorage.setItem('jwtToken', 'eyJhbGciOi...');
localStorage.setItem('creditCard', '4111111111111111');

// ✅ Better: Use sessionStorage for short-lived non-secret tokens,
//    but still avoid storing access tokens that grant prolonged access.
//    Better yet: use HttpOnly cookies for auth.

// ── Encrypting sensitive data (if you absolutely must store in LS)
// Note: the secret key is still in JS memory — at risk during XSS.
function encryptAndStore(key, data, secret) {
  const encrypted = btoa(JSON.stringify(data)); // simplistic base64 encoding
  localStorage.setItem(key, encrypted);
}

function decryptAndRead(key, secret) {
  const encrypted = localStorage.getItem(key);
  if (!encrypted) return null;
  return JSON.parse(atob(encrypted));
}

// ── Best practice: use server-side sessions with HttpOnly cookies
// Server sets cookie with httpOnly flag, JS can't read it.
// Data is never stored in web storage.

// ─────────────────────────────────────────────
// Common Pitfalls with Web Storage
// ─────────────────────────────────────────────

// PITFALL 1: Storing object without stringify
localStorage.setItem('user', { name: 'Alex' });
// Actually stores '[object Object]'
console.log(localStorage.getItem('user')); // '[object Object]'

// FIX: Always JSON.stringify
localStorage.setItem('user', JSON.stringify({ name: 'Alex' }));
const user = JSON.parse(localStorage.getItem('user'));
console.log(user.name); // 'Alex'

// PITFALL 2: Not handling missing keys (null)
const settings = JSON.parse(localStorage.getItem('settings')); // Might be null
// TypeError if you do: settings.theme

// FIX: Provide default
const safeSettings = JSON.parse(localStorage.getItem('settings')) || {};

// PITFALL 3: Assuming sessionStorage survives tab close
sessionStorage.setItem('cart', 'item1');
// Close tab, open new tab
console.log(sessionStorage.getItem('cart')); // null

// FIX: Use localStorage for anything that should persist across tab closes

// PITFALL 4: Forgetting that 'storage' event fires in OTHER tabs only
window.addEventListener('storage', (e) => {
  console.log('Change from another tab:', e.key);
});
localStorage.setItem('test', 'value'); // This tab won't log the event