localStorage and Browser Storage

// Listen for storage changes from other tabs
window.addEventListener("storage", (event) => {
  console.log("Storage changed in another tab");
  console.log("Key:", event.key);
  console.log("Old value:", event.oldValue);
  console.log("New value:", event.newValue);
  console.log("URL:", event.url);
  console.log("Storage area:", event.storageArea === localStorage);
  
  // React to specific changes
  if (event.key === "theme") {
    applyTheme(event.newValue);
  }
  
  // Handle logout in all tabs
  if (event.key === "isLoggedIn" && event.newValue === "false") {
    redirectToLogin();
  }
});

// Trigger storage event in other tabs
localStorage.setItem("notification", JSON.stringify({
  "message": "New update available",
  "timestamp": Date.now()
}));

// Open database (creates if doesn't exist)
const request = indexedDB.open("MyDatabase", 1);

// Handle errors
request.onerror = (event) => {
  console.error("Database error:", event.target.error);
};

// Create schema (only runs when version changes)
request.onupgradeneeded = (event) => {
  const db = event.target.result;
  
  // Create object store with auto-incrementing key
  const userStore = db.createObjectStore("users", {
    "keyPath": "id",
    "autoIncrement": true
  });
  
  // Create indexes for searching
  userStore.createIndex("email", "email", { "unique": true });
  userStore.createIndex("age", "age", { "unique": false });
  userStore.createIndex("city", "city", { "unique": false });
  
  // Create another object store
  const productStore = db.createObjectStore("products", {
    "keyPath": "sku"
  });
  
  productStore.createIndex("category", "category");
  productStore.createIndex("price", "price");
};

// Success - database ready
request.onsuccess = (event) => {
  const db = event.target.result;
  console.log("Database opened successfully");
  
  // Store db reference for later use
  window.db = db;
};

// Add data
function addUser(userData) {
  const transaction = db.transaction(["users"], "readwrite");
  const store = transaction.objectStore("users");
  const request = store.add(userData);
  
  request.onsuccess = () => {
    console.log("User added:", request.result); // Returns key
  };
  
  request.onerror = () => {
    console.error("Add error:", request.error);
  };
}

addUser({ "name": "John", "email": "john@example.com", "age": 30 });

// Get data by key
function getUser(id) {
  const transaction = db.transaction(["users"], "readonly");
  const store = transaction.objectStore("users");
  const request = store.get(id);
  
  request.onsuccess = () => {
    if (request.result) {
      console.log("User found:", request.result);
    } else {
      console.log("User not found");
    }
  };
}

getUser(1);

// Update data (put overwrites)
function updateUser(userData) {
  const transaction = db.transaction(["users"], "readwrite");
  const store = transaction.objectStore("users");
  const request = store.put(userData); // Use put for update
  
  request.onsuccess = () => {
    console.log("User updated");
  };
}

updateUser({ "id": 1, "name": "John Doe", "email": "john@example.com", "age": 31 });

// Delete data
function deleteUser(id) {
  const transaction = db.transaction(["users"], "readwrite");
  const store = transaction.objectStore("users");
  const request = store.delete(id);
  
  request.onsuccess = () => {
    console.log("User deleted");
  };
}

deleteUser(1);

// Get all data
function getAllUsers() {
  const transaction = db.transaction(["users"], "readonly");
  const store = transaction.objectStore("users");
  const request = store.getAll();
  
  request.onsuccess = () => {
    console.log("All users:", request.result);
  };
}

getAllUsers();

// Query by index
function getUserByEmail(email) {
  const transaction = db.transaction(["users"], "readonly");
  const store = transaction.objectStore("users");
  const index = store.index("email");
  const request = index.get(email);
  
  request.onsuccess = () => {
    console.log("User:", request.result);
  };
}

getUserByEmail("john@example.com");

// Range queries with IDBKeyRange
function getUsersByAge(minAge, maxAge) {
  const transaction = db.transaction(["users"], "readonly");
  const store = transaction.objectStore("users");
  const index = store.index("age");
  const range = IDBKeyRange.bound(minAge, maxAge);
  const request = index.getAll(range);
  
  request.onsuccess = () => {
    console.log("Users in age range:", request.result);
  };
}

getUsersByAge(25, 35);

// Cursor for iteration
function iterateUsers() {
  const transaction = db.transaction(["users"], "readonly");
  const store = transaction.objectStore("users");
  const request = store.openCursor();
  
  request.onsuccess = (event) => {
    const cursor = event.target.result;
    if (cursor) {
      console.log("User:", cursor.value);
      cursor.continue(); // Move to next record
    } else {
      console.log("Done iterating");
    }
  };
}

iterateUsers();

// Cursor with filtering
function filterUsers(callback) {
  const transaction = db.transaction(["users"], "readonly");
  const store = transaction.objectStore("users");
  const request = store.openCursor();
  const results = [];
  
  request.onsuccess = (event) => {
    const cursor = event.target.result;
    if (cursor) {
      if (callback(cursor.value)) {
        results.push(cursor.value);
      }
      cursor.continue();
    } else {
      console.log("Filtered results:", results);
    }
  };
}

filterUsers((user) => user.age > 25);

// Helper to promisify IndexedDB
function promisifyRequest(request) {
  return new Promise((resolve, reject) => {
    request.onsuccess = () => resolve(request.result);
    request.onerror = () => reject(request.error);
  });
}

// Async wrapper class
class Database {
  constructor(dbName, version) {
    this.dbName = dbName;
    this.version = version;
  }
  
  async open(upgradeCallback) {
    const request = indexedDB.open(this.dbName, this.version);
    request.onupgradeneeded = upgradeCallback;
    this.db = await promisifyRequest(request);
    return this.db;
  }
  
  async add(storeName, data) {
    const tx = this.db.transaction([storeName], "readwrite");
    const store = tx.objectStore(storeName);
    return promisifyRequest(store.add(data));
  }
  
  async get(storeName, key) {
    const tx = this.db.transaction([storeName], "readonly");
    const store = tx.objectStore(storeName);
    return promisifyRequest(store.get(key));
  }
  
  async getAll(storeName) {
    const tx = this.db.transaction([storeName], "readonly");
    const store = tx.objectStore(storeName);
    return promisifyRequest(store.getAll());
  }
  
  async delete(storeName, key) {
    const tx = this.db.transaction([storeName], "readwrite");
    const store = tx.objectStore(storeName);
    return promisifyRequest(store.delete(key));
  }
}

// Usage with async/await
async function useDatabase() {
  const db = new Database("MyDB", 1);
  
  await db.open((event) => {
    const database = event.target.result;
    database.createObjectStore("users", { "keyPath": "id", "autoIncrement": true });
  });
  
  const id = await db.add("users", { "name": "John", "email": "john@example.com" });
  console.log("Added user:", id);
  
  const user = await db.get("users", id);
  console.log("User:", user);
  
  const allUsers = await db.getAll("users");
  console.log("All users:", allUsers);
}

// Open cache and add resources
async function cacheResources() {
  const cache = await caches.open("my-cache-v1");
  
  // Add single resource
  await cache.add("/api/data");
  
  // Add multiple resources (atomic operation)
  await cache.addAll([
    "/",
    "/styles.css",
    "/script.js",
    "/logo.png"
  ]);
  
  console.log("Resources cached");
}

// Check cache before fetching
async function fetchWithCache(url) {
  // Try cache first
  const cachedResponse = await caches.match(url);
  if (cachedResponse) {
    console.log("Cache hit:", url);
    return cachedResponse;
  }
  
  // Cache miss - fetch from network
  console.log("Cache miss:", url);
  const response = await fetch(url);
  
  // Store in cache for next time
  const cache = await caches.open("my-cache-v1");
  cache.put(url, response.clone());
  
  return response;
}

// Usage
const response = await fetchWithCache("/api/users");
const data = await response.json();

// Cache First (good for static assets)
async function cacheFirst(request) {
  const cached = await caches.match(request);
  if (cached) return cached;
  
  const response = await fetch(request);
  const cache = await caches.open("static-v1");
  cache.put(request, response.clone());
  return response;
}

// Network First (good for dynamic data)
async function networkFirst(request) {
  try {
    const response = await fetch(request);
    const cache = await caches.open("dynamic-v1");
    cache.put(request, response.clone());
    return response;
  } catch (error) {
    const cached = await caches.match(request);
    if (cached) return cached;
    throw error;
  }
}

// Stale While Revalidate (best of both)
async function staleWhileRevalidate(request) {
  const cached = await caches.match(request);
  
  const fetchPromise = fetch(request).then((response) => {
    const cache = caches.open("swr-v1");
    cache.then((c) => c.put(request, response.clone()));
    return response;
  });
  
  return cached || fetchPromise;
}

// Cache with expiration
async function cacheWithExpiry(request, cacheName, maxAge) {
  const cache = await caches.open(cacheName);
  const cached = await cache.match(request);
  
  if (cached) {
    const cachedDate = new Date(cached.headers.get("date"));
    const age = Date.now() - cachedDate.getTime();
    
    if (age < maxAge) {
      return cached; // Still fresh
    }
  }
  
  // Expired or missing - fetch fresh
  const response = await fetch(request);
  cache.put(request, response.clone());
  return response;
}

// List all caches
async function listCaches() {
  const cacheNames = await caches.keys();
  console.log("Caches:", cacheNames);
  return cacheNames;
}

// Delete old cache versions
async function deleteOldCaches(currentVersion) {
  const cacheNames = await caches.keys();
  const deletePromises = cacheNames
    .filter((name) => name !== currentVersion)
    .map((name) => caches.delete(name));
  
  await Promise.all(deletePromises);
  console.log("Old caches deleted");
}

// Usage in Service Worker activate event
self.addEventListener("activate", (event) => {
  event.waitUntil(
    deleteOldCaches("my-cache-v2")
  );
});

// List cached URLs
async function listCachedUrls(cacheName) {
  const cache = await caches.open(cacheName);
  const requests = await cache.keys();
  const urls = requests.map((req) => req.url);
  console.log("Cached URLs:", urls);
  return urls;
}

// Remove specific cached item
async function removeCachedItem(url) {
  const cache = await caches.open("my-cache-v1");
  const deleted = await cache.delete(url);
  console.log(`Cache entry deleted: ${deleted}`);
}

// Clear all caches
async function clearAllCaches() {
  const cacheNames = await caches.keys();
  await Promise.all(
    cacheNames.map((name) => caches.delete(name))
  );
  console.log("All caches cleared");
}

// Set cookie
function setCookie(name, value, days = 7, options = {}) {
  let cookie = `${encodeURIComponent(name)}=${encodeURIComponent(value)}`;
  
  // Expiration
  if (days) {
    const date = new Date();
    date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
    cookie += `; expires=${date.toUTCString()}`;
  }
  
  // Path (default to root)
  cookie += `; path=${options.path || "/"}`;
  
  // Domain
  if (options.domain) {
    cookie += `; domain=${options.domain}`;
  }
  
  // Secure
  if (options.secure) {
    cookie += "; secure";
  }
  
  // SameSite
  if (options.sameSite) {
    cookie += `; samesite=${options.sameSite}`;
  }
  
  document.cookie = cookie;
}

// Get cookie
function getCookie(name) {
  const cookies = document.cookie.split("; ");
  for (let cookie of cookies) {
    const [cookieName, cookieValue] = cookie.split("=");
    if (decodeURIComponent(cookieName) === name) {
      return decodeURIComponent(cookieValue);
    }
  }
  return null;
}

// Delete cookie
function deleteCookie(name, options = {}) {
  setCookie(name, "", -1, options);
}

// Get all cookies as object
function getAllCookies() {
  const cookies = {};
  document.cookie.split("; ").forEach((cookie) => {
    const [name, value] = cookie.split("=");
    cookies[decodeURIComponent(name)] = decodeURIComponent(value);
  });
  return cookies;
}

// Usage
setCookie("username", "john_doe", 30, {
  "path": "/",
  "secure": true,
  "sameSite": "Strict"
});

const username = getCookie("username");
console.log(username); // "john_doe"

deleteCookie("username");

// Get root directory
const root = await navigator.storage.getDirectory();

// Create/get file
const fileHandle = await root.getFileHandle("data.txt", { "create": true });

// Write to file
const writable = await fileHandle.createWritable();
await writable.write("Hello, File System!");
await writable.write({ "type": "write", "data": "\nNew line" });
await writable.close();

// Read from file
const file = await fileHandle.getFile();
const contents = await file.text();
console.log(contents);

// Create directory
const dirHandle = await root.getDirectoryHandle("documents", { "create": true });

// Create file in subdirectory
const subFileHandle = await dirHandle.getFileHandle("note.txt", { "create": true });

// List directory contents
for await (const entry of root.values()) {
  console.log(entry.kind, entry.name); // "file" or "directory"
}

// Delete file
await root.removeEntry("data.txt");

// Delete directory recursively
await root.removeEntry("documents", { "recursive": true });

// Check storage quota and usage
async function checkStorageQuota() {
  if (navigator.storage && navigator.storage.estimate) {
    const estimate = await navigator.storage.estimate();
    const usage = estimate.usage; // Bytes used
    const quota = estimate.quota; // Bytes available
    const percentUsed = (usage / quota * 100).toFixed(2);
    
    console.log(`Storage: ${formatBytes(usage)} / ${formatBytes(quota)}`);
    console.log(`${percentUsed}% used`);
    
    if (estimate.usageDetails) {
      console.log("Breakdown:", estimate.usageDetails);
      // { indexedDB: 1234, caches: 5678, ... }
    }
    
    return { usage, quota, percentUsed };
  }
}

function formatBytes(bytes) {
  if (bytes === 0) return "0 Bytes";
  const k = 1024;
  const sizes = ["Bytes", "KB", "MB", "GB"];
  const i = Math.floor(Math.log(bytes) / Math.log(k));
  return Math.round(bytes / Math.pow(k, i) * 100) / 100 + " " + sizes[i];
}

// Request persistent storage
async function requestPersistentStorage() {
  if (navigator.storage && navigator.storage.persist) {
    const isPersisted = await navigator.storage.persist();
    console.log(`Persistent storage: ${isPersisted}`);
    return isPersisted;
  }
  return false;
}

// Check if storage is persistent
async function checkPersistence() {
  if (navigator.storage && navigator.storage.persisted) {
    const isPersisted = await navigator.storage.persisted();
    console.log(`Storage persisted: ${isPersisted}`);
    return isPersisted;
  }
  return false;
}

// Monitor storage before operations
async function monitorStorage() {
  const before = await navigator.storage.estimate();
  
  // Perform storage operations
  await performHeavyStorageOperation();
  
  const after = await navigator.storage.estimate();
  const increased = after.usage - before.usage;
  console.log(`Storage increased by: ${formatBytes(increased)}`);
}