Bài 13. Web Storage và các Web API hữu ích

Khái niệm và lý thuyết

localStorage lưu lâu dài, sessionStorage mất khi đóng tab; cả hai chỉ lưu chuỗi và hoạt động đồng bộ. Dữ liệu lớn hoặc có cấu trúc nên dùng IndexedDB. Các API nhạy cảm (vị trí, thông báo, clipboard đọc) yêu cầu HTTPS và sự đồng ý của người dùng.

localStorage

const KHOA = "cai-dat";
function luu(obj) { localStorage.setItem(KHOA, JSON.stringify(obj)); }
function doc() {
  try { return JSON.parse(localStorage.getItem(KHOA)) ?? {}; }
  catch { return {}; }
}
luu({ cheDoToi: true, coChu: 16 });
document.body.classList.toggle("dark", doc().cheDoToi);
// Đồng bộ giữa các tab
window.addEventListener("storage", e => { if (e.key === KHOA) location.reload(); });

Intersection Observer

const io = new IntersectionObserver(entries => {
  for (const e of entries) {
    if (e.isIntersecting) {
      e.target.src = e.target.dataset.src;  // tải ảnh lười
      io.unobserve(e.target);
    }
  }
}, { rootMargin: "200px" });
document.querySelectorAll("img[data-src]").forEach(img => io.observe(img));

Ứng dụng: tải ảnh lười, cuộn vô hạn, hiệu ứng khi phần tử xuất hiện. Hiệu quả hơn nhiều so với lắng nghe sự kiện scroll.

Clipboard, vị trí, thông báo

await navigator.clipboard.writeText("Đã sao chép!");

navigator.geolocation.getCurrentPosition(
  p => console.log(p.coords.latitude, p.coords.longitude),
  err => console.warn(err.message));

if (await Notification.requestPermission() === "granted") {
  new Notification("Tự Học Tin", { body: "Bạn có bài học mới" });
}

FormData

form.addEventListener("submit", e => {
  e.preventDefault();
  const duLieu = Object.fromEntries(new FormData(form));
  console.log(duLieu); // { hoTen: "...", email: "..." }
});