JavaScript Academy · Pelajaran

Peristiwa dan Batas Penyimpanan

Tanggapi perubahan dan patuhi batas kuota.

Peristiwa dan Batas Penyimpanan adalah pelajaran JavaScript Academy gratis di CoddyKit. Ini adalah pelajaran 4 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar JavaScript Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus JavaScript Academy mencakup 4 pelajaran total.

Merespons Perubahan Penyimpanan

Peristiwa storage memungkinkan satu tab merespons saat tab lain mengubah localStorage. Hal ini memungkinkan sinkronisasi sederhana antar-tab.

Mendengarkan Peristiwa Penyimpanan

Tambahkan pendengar pada window. Pendengar ini terpicu di tab OTHER pada asal yang sama setiap kali localStorage berubah, tetapi tidak di tab yang melakukan perubahan.

window.addEventListener("storage", (e) => {
  console.log("Key changed:", e.key);
});

Objek StorageEvent

Peristiwa ini membawa key, oldValue, newValue, storageArea, dan url. Semua informasi tersebut secara tepat menjelaskan perubahan yang terjadi.

window.addEventListener("storage", (e) => {
  console.log(e.key, e.oldValue, "->", e.newValue);
});

Hanya Terpicu di Tab OTHER

Satu hal penting yang agak tersembunyi: peristiwa ini TIDAK terpicu di tab yang memanggil setItem. Peristiwa ini dimaksudkan untuk memberi tahu tab lain, jadi jangan mengandalkannya untuk pembaruan di tab yang sama.

Pola Sinkronisasi Antar-Tab

Gunakan peristiwa ini untuk menjaga konsistensi antar-tab, misalnya dengan mencatat pengguna keluar di semua tab saat salah satu tab menghapus token autentikasi.

window.addEventListener("storage", (e) => {
  if (e.key === "token" && e.newValue === null) {
    logoutUI();
  }
});

Mendeteksi Penghapusan

Saat clear() dijalankan, peristiwa terpicu dengan key yang ditetapkan ke null. Tangani kasus ini untuk mengatur ulang semuanya.

window.addEventListener("storage", (e) => {
  if (e.key === null) resetApp();
});

Kuota Penyimpanan

Setiap asal mendapatkan batas kapasitas, yang biasanya sekitar total 5MB untuk localStorage. Kapasitas ini jauh lebih kecil daripada IndexedDB, jadi simpan hanya data dalam jumlah sedang.

Kesalahan Kuota Terlampaui

Jika kuota terlampaui, QuotaExceededError akan dilemparkan pada setItem. Selalu bungkus penulisan berukuran besar atau yang tidak tepercaya dalam try/catch.

try {
  localStorage.setItem("big", hugeString);
} catch (e) {
  console.log("Storage full:", e.name);
}

Jumlah UTF-16 Berlipat Dua

String disimpan sebagai UTF-16, sehingga setiap karakter menggunakan kira-kira 2 byte. Kuota 5MB dapat menampung sekitar 2,5 juta karakter, dan jumlahnya lebih sedikit untuk teks non-ASCII.

Memperkirakan Penggunaan

Anda dapat mengukur penggunaan secara kasar dengan menjumlahkan panjang kunci dan nilai. Tidak ada API yang memberikan ukuran tepat, tetapi cara ini menghasilkan perkiraan yang berguna.

let total = 0;
for (let i = 0; i < localStorage.length; i++) {
  const k = localStorage.key(i);
  total += k.length + localStorage.getItem(k).length;
}
console.log(total, "chars");

Kapan Menggunakan Sesuatu yang Lebih Besar

Untuk data berukuran besar atau terstruktur yang melebihi beberapa MB, gunakan IndexedDB. Penyimpanan Web paling cocok untuk penanda, preferensi, dan token berukuran kecil.

Pemeriksaan Singkat

Peristiwa dan batas penyimpanan.

Ringkasan

Peristiwa storage memberi tahu tab OTHER pada suatu asal tentang perubahan localStorage, dengan membawa key, oldValue, dan newValue (key bernilai null saat penyimpanan dihapus). Kuotanya kira-kira 5MB, dan penulisan yang melebihinya akan melemparkan QuotaExceededError. Karena itu, bungkus penulisan berisiko dalam try/catch dan gunakan IndexedDB untuk data yang lebih besar.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Peristiwa dan Batas Penyimpanan” gratis?

Ya — teks lengkap “Peristiwa dan Batas Penyimpanan” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus JavaScript Academy, upgrade ke CoddyKit PRO. Kursus JavaScript Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Peristiwa dan Batas Penyimpanan”?

Tanggapi perubahan dan patuhi batas kuota. Kamu berlatih JavaScript Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai JavaScript Academy?

Tidak diperlukan pengalaman sebelumnya. JavaScript Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 4 dari 4.

Berapa lama pelajaran “Peristiwa dan Batas Penyimpanan” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran JavaScript Academy ini?

Ya. Setiap pelajaran JavaScript Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

← Kembali ke JavaScript Academy