Peristiwa dan Had Storan
Beri respons terhadap perubahan dan patuhi had kuota.
Peristiwa dan Had Storan ialah pelajaran Akademi JavaScript percuma di CoddyKit. Ini ialah pelajaran 4 daripada 4. Sebanyak 3 pelajaran dalam laluan pembelajaran ini boleh dibaca sepenuhnya secara percuma — selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan praktikal dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran Akademi JavaScript, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus Akademi JavaScript merangkumi sejumlah 4 pelajaran.
Memberi tindak balas terhadap perubahan storan
Peristiwa storage membolehkan satu tab bertindak balas apabila tab lain mengubah localStorage. Peristiwa ini membolehkan penyegerakan mudah antara tab.
Mendengar peristiwa storan
Tambahkan pendengar pada window. Pendengar ini dicetuskan dalam tab OTHER daripada asal yang sama setiap kali localStorage berubah, tetapi bukan dalam tab yang membuat perubahan itu.
window.addEventListener("storage", (e) => {
console.log("Key changed:", e.key);
});Objek StorageEvent
Peristiwa ini membawa key, oldValue, newValue, storageArea dan url. Kesemuanya menerangkan dengan tepat perkara yang berubah.
window.addEventListener("storage", (e) => {
console.log(e.key, e.oldValue, "->", e.newValue);
});Dicetuskan hanya dalam tab lain
Satu perincian penting: peristiwa ini NOT dicetuskan dalam tab yang sama yang memanggil setItem. Peristiwa ini bertujuan memaklumkan tab lain, jadi jangan bergantung padanya untuk kemas kini dalam tab yang sama.
Corak penyegerakan antara tab
Gunakan peristiwa ini untuk memastikan semua tab kekal konsisten, contohnya dengan melog keluar pengguna di semua tab apabila satu tab memadam token pengesahan.
window.addEventListener("storage", (e) => {
if (e.key === "token" && e.newValue === null) {
logoutUI();
}
});Mengesan clear()
Apabila clear() dijalankan, peristiwa dicetuskan dengan key ditetapkan kepada null. Kendalikan keadaan ini untuk menetapkan semula segala-galanya.
window.addEventListener("storage", (e) => {
if (e.key === null) resetApp();
});Kuota storan
Setiap asal mendapat jumlah ruang yang terhad, biasanya sekitar 5MB secara keseluruhan untuk localStorage. Jumlah ini jauh lebih kecil berbanding IndexedDB, jadi simpan jumlah data yang sederhana sahaja.
Ralat kuota terlampaui
Apabila kuota dilampaui, QuotaExceededError dicetuskan pada setItem. Sentiasa balut penulisan yang besar atau tidak dipercayai dengan pengendalian ralat.
try {
localStorage.setItem("big", hugeString);
} catch (e) {
console.log("Storage full:", e.name);
}Kiraan UTF-16 berganda
Rentetan disimpan sebagai UTF-16, jadi setiap aksara menggunakan kira-kira 2 bait. Kuota 5MB boleh memuatkan kira-kira 2.5 juta aksara, dan lebih sedikit untuk teks bukan ASCII.
Menganggarkan penggunaan
Anda boleh mengukur penggunaan secara kasar dengan menjumlahkan panjang key dan value. Tiada antara muka pengaturcaraan aplikasi yang memberikan nilai tepat, tetapi kaedah ini menghasilkan anggaran 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");Bila perlu menggunakan sesuatu yang lebih besar
Untuk data besar atau berstruktur yang melebihi beberapa MB, gunakan IndexedDB. Storan Web paling sesuai untuk penanda kecil, pilihan pengguna dan token.
Semakan pantas
Peristiwa dan had storan.
Ringkasan
Peristiwa storage memaklumkan tab OTHER daripada sesuatu asal tentang perubahan pada localStorage, sambil membawa key, oldValue dan newValue (key ialah null apabila clear dilakukan). Kuota adalah kira-kira 5MB dan penulisan yang melebihinya mencetuskan QuotaExceededError, jadi balut penulisan berisiko dengan pengendalian ralat dan gunakan IndexedDB untuk data yang lebih besar.
Pelajari JavaScript dengan tutor kecerdasan buatan — percuma
Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.
- Kursus
- 59
- Pelajaran
- 200
Soalan Lazim
Adakah pelajaran “Peristiwa dan Had Storan” percuma?
Ya — sebanyak 3 pelajaran dalam laluan pembelajaran Akademi JavaScript, termasuk “Peristiwa dan Had Storan”, boleh dibaca sepenuhnya secara percuma di web ini. Selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan interaktif dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Kursus Akademi JavaScript merangkumi sejumlah 4 pelajaran.
Apakah yang akan saya pelajari dalam “Peristiwa dan Had Storan”?
Beri respons terhadap perubahan dan patuhi had kuota. Anda berlatih Akademi JavaScript menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.
Adakah saya memerlukan pengalaman untuk memulakan Akademi JavaScript?
Tiada pengalaman terdahulu diperlukan. Pembelajaran Akademi JavaScript di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 4 daripada 4.
Berapa lamakah pelajaran “Peristiwa dan Had Storan” diambil?
Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.
Bolehkah saya menulis dan menjalankan kod dalam pelajaran Akademi JavaScript ini?
Ya. Setiap pelajaran Akademi JavaScript menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.
Semua pelajaran dalam kursus ini
- Menyimpan dan Membaca Data
- localStorage berbanding sessionStorage
- Menyimpan Objek dengan JSON
- Peristiwa dan Had Storan