Practice Questions — Local Storage and Session Storage

// On page load
const savedTheme = localStorage.getItem("theme");
if (savedTheme === "dark") {
  document.body.classList.add("dark-mode");
  console.log("Theme loaded: dark");
} else {
  console.log("Theme loaded: light");
}

// Toggle button
document.getElementById("themeToggle").addEventListener("click", function() {
  document.body.classList.toggle("dark-mode");
  const isDark = document.body.classList.contains("dark-mode");
  localStorage.setItem("theme", isDark ? "dark" : "light");
  console.log("Theme toggled to:", isDark ? "dark" : "light");
});

const usernameInput = document.getElementById("username");
const rememberCheckbox = document.getElementById("remember");
const form = document.getElementById("loginForm");

// Load saved username
const savedUsername = localStorage.getItem("rememberedUser");
if (savedUsername) {
  usernameInput.value = savedUsername;
  rememberCheckbox.checked = true;
}

form.addEventListener("submit", function(e) {
  e.preventDefault();
  if (rememberCheckbox.checked) {
    localStorage.setItem("rememberedUser", usernameInput.value);
    console.log("Username saved:", usernameInput.value);
  } else {
    localStorage.removeItem("rememberedUser");
    console.log("Username cleared from storage");
  }
});

const raw = localStorage.getItem("visitCount");
let count = raw ? Number(raw) : 0;
count++;
localStorage.setItem("visitCount", count);

console.log("Visit " + count);
document.getElementById("counter").textContent = "You have visited this page " + count + " time(s).";

function loadNotes() {
  const raw = localStorage.getItem("notes");
  return raw ? JSON.parse(raw) : [];
}

function saveNotes(notes) {
  localStorage.setItem("notes", JSON.stringify(notes));
}

function addNote(text) {
  const notes = loadNotes();
  notes.push({ text: text, date: new Date().toISOString().split("T")[0] });
  saveNotes(notes);
  renderNotes();
}

function deleteNote(index) {
  const notes = loadNotes();
  notes.splice(index, 1);
  saveNotes(notes);
  renderNotes();
}

function renderNotes() {
  const notes = loadNotes();
  const list = document.getElementById("notesList");
  list.innerHTML = "";
  notes.forEach(function(note, i) {
    const div = document.createElement("div");
    div.innerHTML = (i + 1) + ". " + note.text + " (" + note.date + ") ";
    const btn = document.createElement("button");
    btn.textContent = "Delete";
    btn.addEventListener("click", function() { deleteNote(i); });
    div.appendChild(btn);
    list.appendChild(div);
  });
  console.log(notes.length + " notes saved.");
}

renderNotes();

function loadCart() {
  const raw = localStorage.getItem("cart");
  return raw ? JSON.parse(raw) : [];
}

function saveCart(cart) {
  localStorage.setItem("cart", JSON.stringify(cart));
}

function addItem(name, qty) {
  const cart = loadCart();
  const existing = cart.find(function(item) { return item.name === name; });
  if (existing) {
    existing.quantity += qty;
  } else {
    cart.push({ name: name, quantity: qty });
  }
  saveCart(cart);
}

function removeItem(name) {
  let cart = loadCart();
  cart = cart.filter(function(item) { return item.name !== name; });
  saveCart(cart);
}

function getTotal() {
  const cart = loadCart();
  return cart.reduce(function(sum, item) { return sum + item.quantity; }, 0);
}

// Test
localStorage.clear();
addItem("Notebook", 2);
addItem("Pen", 5);
addItem("Notebook", 1);
console.log("Cart:", loadCart());
console.log("Total items:", getTotal());

const fields = ["name", "email", "message"];

// Load saved draft
const raw = localStorage.getItem("formDraft");
const draft = raw ? JSON.parse(raw) : {};
fields.forEach(function(field) {
  const el = document.getElementById(field);
  if (draft[field]) el.value = draft[field];
  
  el.addEventListener("input", function() {
    const current = raw ? JSON.parse(localStorage.getItem("formDraft")) : {};
    current[field] = el.value;
    localStorage.setItem("formDraft", JSON.stringify(current));
    console.log("Draft saved");
  });
});

document.getElementById("regForm").addEventListener("submit", function(e) {
  e.preventDefault();
  localStorage.removeItem("formDraft");
  console.log("Form submitted, draft cleared.");
});

function loadScores() {
  const raw = localStorage.getItem("highScores");
  return raw ? JSON.parse(raw) : [];
}

function addScore(name, score) {
  const scores = loadScores();
  scores.push({
    name: name,
    score: score,
    date: new Date().toISOString().split("T")[0]
  });
  scores.sort(function(a, b) { return b.score - a.score; });
  const top5 = scores.slice(0, 5);
  localStorage.setItem("highScores", JSON.stringify(top5));
  return top5;
}

function displayScores() {
  const scores = loadScores();
  console.log("Leaderboard:");
  scores.forEach(function(entry, i) {
    console.log((i + 1) + ". " + entry.name + " - " + entry.score + " (" + entry.date + ")");
  });
}

localStorage.clear();
addScore("Aarav", 950);
addScore("Priya", 1200);
addScore("Rohan", 800);
addScore("Meera", 1100);
addScore("Kavya", 1050);
addScore("Arjun", 1150);
displayScores();

function getStorageUsed() {
  let total = 0;
  for (let i = 0; i < localStorage.length; i++) {
    const key = localStorage.key(i);
    const value = localStorage.getItem(key);
    total += key.length + value.length;
  }
  return total * 2; // UTF-16 uses 2 bytes per character
}

function getStorageInfo() {
  const used = getStorageUsed();
  const usedKB = (used / 1024).toFixed(2);
  const limit = 5 * 1024 * 1024; // ~5MB
  const remainingKB = ((limit - used) / 1024).toFixed(2);
  const percentage = ((used / limit) * 100).toFixed(2);

  console.log("Used: " + usedKB + " KB");
  console.log("Estimated remaining: ~" + remainingKB + " KB");
  console.log("Usage: " + percentage + "%");
  console.log("Keys stored: " + localStorage.length);
  return { usedKB: usedKB, remainingKB: remainingKB, percentage: percentage };
}

getStorageInfo();