Browser Storage

1
// Set
2
localStorage.setItem("theme", "dark");
3
localStorage.setItem("user", JSON.stringify({ name: "Alice", id: 1 }));
4

5
// Get
6
const theme = localStorage.getItem("theme"); // "dark"
7
const user = JSON.parse(localStorage.getItem("user")); // { name: "Alice", id: 1 }
8

9
// Remove
10
localStorage.removeItem("theme");
11

12
// Clear all
13
localStorage.clear();
14

15
// Check size
16
console.log(localStorage.length); // number of items

1
// Load saved theme
2
const savedTheme = localStorage.getItem("theme") || "light";
3
document.documentElement.setAttribute("data-theme", savedTheme);
4

5
// Toggle and save
6
document.getElementById("theme-toggle").addEventListener("click", () => {
7
  const current = document.documentElement.getAttribute("data-theme");
8
  const next = current === "dark" ? "light" : "dark";
9
  document.documentElement.setAttribute("data-theme", next);
10
  localStorage.setItem("theme", next);
11
});

1
const form = document.getElementById("blog-form");
2
const draftKey = "blogDraft";
3

4
// Auto-save on input
5
form.addEventListener("input", () => {
6
  const formData = new FormData(form);
7
  const draft = Object.fromEntries(formData);
8
  localStorage.setItem(draftKey, JSON.stringify(draft));
9
});
10

11
// Restore draft on page load
12
const savedDraft = localStorage.getItem(draftKey);
13
if (savedDraft) {
14
  const draft = JSON.parse(savedDraft);
15
  Object.entries(draft).forEach(([name, value]) => {
16
    const input = form.querySelector(`[name="${name}"]`);
17
    if (input) input.value = value;
18
  });
19
}
20

21
// Clear draft on successful submit
22
form.addEventListener("submit", () => {
23
  localStorage.removeItem(draftKey);
24
});

1
// Same API as localStorage
2
sessionStorage.setItem("scrollPosition", window.scrollY);
3
sessionStorage.setItem("formStep", "3");
4

5
// Use case: restore scroll position after accidental navigation
6
window.addEventListener("beforeunload", () => {
7
  sessionStorage.setItem("scrollPos", window.scrollY);
8
});
9

10
window.addEventListener("load", () => {
11
  const savedPos = sessionStorage.getItem("scrollPos");
12
  if (savedPos) {
13
    window.scrollTo(0, parseInt(savedPos));
14
  }
15
});

1
// Set a cookie (expires in 7 days)
2
document.cookie = `theme=dark; max-age=${7 * 24 * 60 * 60}; path=/; SameSite=Lax`;
3

4
// Set secure cookie (HTTPS only)
5
document.cookie = "sessionId=abc123; Secure; HttpOnly; SameSite=Strict";
6

7
// Read all cookies
8
console.log(document.cookie); // "theme=dark; preference=compact"
9

10
// Parse cookies
11
function getCookie(name) {
12
  const match = document.cookie.match(new RegExp(`(^| )${name}=([^;]+)`));
13
  return match ? decodeURIComponent(match[2]) : null;
14
}
15

16
// Delete a cookie (set past expiration)
17
document.cookie = "theme=; max-age=0; path=/";

1
// Open/create a database
2
const request = indexedDB.open("MyApp", 1);
3

4
request.onupgradeneeded = (event) => {
5
  const db = event.target.result;
6
  // Create an object store (like a table)
7
  const store = db.createObjectStore("notes", {
8
    keyPath: "id",
9
    autoIncrement: true,
10
  });
11
  store.createIndex("title", "title", { unique: false });
12
};
13

14
request.onsuccess = (event) => {
15
  const db = event.target.result;
16
  console.log("Database ready");
17
};
18

19
// Add a record
20
function addNote(note) {
21
  const db = request.result;
22
  const tx = db.transaction("notes", "readwrite");
23
  const store = tx.objectStore("notes");
24
  store.add(note);
25
}
26

27
// Get all records
28
function getAllNotes() {
29
  return new Promise((resolve, reject) => {
30
    const db = request.result;
31
    const tx = db.transaction("notes", "readonly");
32
    const store = tx.objectStore("notes");
33
    const all = store.getAll();
34
    all.onsuccess = () => resolve(all.result);
35
    all.onerror = () => reject(all.error);
36
  });
37
}

1
function safeLocalStorageSet(key, value) {
2
  try {
3
    localStorage.setItem(key, value);
4
    return true;
5
  } catch (error) {
6
    if (error.name === "QuotaExceededError") {
7
      console.warn("Storage is full — clearing old cache");
8
      // Clear old items or notify user
9
      return false;
10
    }
11
    console.error("localStorage error:", error);
12
    return false;
13
  }
14
}
15

16
// Check available storage (Chrome-based browsers)
17
if (navigator.storage && navigator.storage.estimate) {
18
  navigator.storage.estimate().then(({ usage, quota }) => {
19
    console.log(`Using ${usage} of ${quota} bytes`);
20
    console.log(`Available: ${((quota - usage) / 1024 / 1024).toFixed(1)} MB`);
21
  });
22
}

1
// Check if Cache API is available
2
if ("caches" in window) {
3
  // Open a cache
4
  const cache = await caches.open("api-responses");
5

6
  // Store a response
7
  cache.put("/api/users", new Response(JSON.stringify(users)));
8

9
  // Read from cache
10
  const response = await cache.match("/api/users");
11
  const data = await response.json();
12
}

1
// Check if storage is available
2
function isStorageAvailable(type) {
3
  try {
4
    const storage = window[type];
5
    const key = "__test__";
6
    storage.setItem(key, "1");
7
    storage.removeItem(key);
8
    return true;
9
  } catch {
10
    return false;
11
  }
12
}
13

14
if (!isStorageAvailable("localStorage")) {
15
  // Fall back to in-memory storage or cookies
16
  console.warn("localStorage not available");
17
}