Mendapatkan Mengatur dan Menghapus Item
Gunakan Web Storage API untuk membaca dan menulis data.
Mendapatkan Mengatur dan Menghapus Item adalah pelajaran HTML Academy gratis di CoddyKit. Ini adalah pelajaran 2 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 HTML Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus HTML Academy mencakup 4 pelajaran total.
Antarmuka API Penyimpanan
Baik localStorage maupun sessionStorage menyediakan empat metode inti yang sama: getItem(key), setItem(key, value), removeItem(key), dan clear(). Keduanya merupakan penyimpanan pasangan kunci-nilai sederhana yang didukung oleh browser.
setItem Menyimpan Teks
localStorage.setItem("theme", "dark") menyimpan sebuah teks dengan kunci "theme". Kunci dan nilai harus berupa teks—nilai yang bukan teks akan dikonversi menjadi teks sebelum disimpan, sehingga objek dan larik dapat rusak tanpa disadari.
localStorage.setItem("theme", "dark");
localStorage.setItem("count", "42");Menyimpan Objek dengan JSON
Untuk menyimpan data terstruktur, serialisasikan dengan JSON: localStorage.setItem("user", JSON.stringify(user)). Baca kembali datanya: const user = JSON.parse(localStorage.getItem("user")). Selalu bungkus proses penguraian dalam penanganan try/catch jika nilai yang disimpan memiliki format yang tidak valid.
const user = { name: "Ada", age: 30 };
localStorage.setItem("user", JSON.stringify(user));
const loaded = JSON.parse(localStorage.getItem("user"));getItem Mengembalikan Teks atau null
getItem("missing") mengembalikan null jika kunci tidak ada—tidak pernah undefined. Gunakan operator penggabungan nilai kosong untuk memberikan nilai bawaan: const theme = localStorage.getItem("theme") ?? "light".
Sintaks Akses Properti
Anda juga dapat menggunakan notasi kurung siku dan titik: localStorage.theme = "dark" dan localStorage["theme"]. Keduanya berfungsi, tetapi maksudnya menjadi kurang jelas—pilih pemanggilan metode yang eksplisit karena cara ini dengan jelas menunjukkan bahwa data tersebut merupakan penyimpanan persisten, bukan properti objek.
removeItem dan Penghapusan Semua Data
localStorage.removeItem("theme") menghapus satu kunci. localStorage.clear() menghapus semua kunci untuk asal saat ini. clear() bersifat merusak—jangan pernah memanggilnya tanpa alasan yang kuat; metode ini menghapus data yang ditetapkan oleh setiap skrip di halaman.
Menelusuri Kunci Tersimpan
Gunakan localStorage.length dan localStorage.key(index) untuk menelusuri semua kunci yang tersimpan, atau sebarkan hasil Object.keys(localStorage). Cara ini berguna untuk migrasi, penelusuran kesalahan, dan pembersihan berdasarkan awalan, seperti menghapus semua kunci yang diawali dengan "cache:".
for (let i = 0; i < localStorage.length; i++) {
const key = localStorage.key(i);
console.log(key, localStorage.getItem(key));
}Kesalahan Kuota Terlampaui
Browser mengalokasikan sekitar 5–10 MB per asal. Jika kuota terlampaui, akan muncul QuotaExceededError. Bungkus setItem dalam penanganan try/catch saat menyimpan nilai yang berpotensi besar, seperti cache gambar atau draf dokumen, agar kesalahan tersebut tidak membuat aplikasi berhenti.
try {
localStorage.setItem("draft", largeString);
} catch (e) {
if (e.name === "QuotaExceededError") {
// free space, warn user, or fall back
}
}Pemberian Ruang Nama pada Kunci
Penyimpanan digunakan bersama oleh seluruh asal. Awali kunci Anda dengan nama aplikasi atau fitur (app:settings, cart:items) untuk menghindari benturan dengan skrip lain, pustaka pihak ketiga, dan ekstensi browser yang berjalan pada asal yang sama.
Sinkron dan Memblokir
API Penyimpanan sepenuhnya bersifat sinkron—setiap pemanggilan memblokir utas utama hingga operasi masukan/keluaran disk selesai. Hindari menyimpan blob yang sangat besar atau memanggil setItem dalam perulangan yang ketat; gabungkan pembaruan menjadi satu objek yang diserialisasikan.
sessionStorage Dibandingkan dengan localStorage
Antarmuka API sama, tetapi masa berlakunya berbeda. sessionStorage dihapus saat tab ditutup; localStorage tetap ada setelah browser dimulai ulang. Pilih sessionStorage untuk status panduan sementara dan localStorage untuk preferensi pengguna yang harus tetap ada setelah halaman dimuat ulang.
Uji Pengetahuan
Apa yang dikembalikan localStorage.getItem("missing-key") ketika kunci tersebut belum pernah ditetapkan?
Ringkasan
getItem, setItem, removeItem, dan clear merupakan empat dasar Penyimpanan Web. Nilai selalu berupa teks, jadi bungkus data terstruktur dengan JSON. Antisipasi nilai null, QuotaExceededError, dan pemberian ruang nama agar dapat berbagi asal dengan baik bersama skrip lain.
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Mendapatkan Mengatur dan Menghapus Item” gratis?
Ya — teks lengkap “Mendapatkan Mengatur dan Menghapus Item” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus HTML Academy, upgrade ke CoddyKit PRO. Kursus HTML Academy mencakup 4 pelajaran total.
Apa yang akan aku pelajari di “Mendapatkan Mengatur dan Menghapus Item”?
Gunakan Web Storage API untuk membaca dan menulis data. Kamu berlatih HTML 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 HTML Academy?
Tidak diperlukan pengalaman sebelumnya. HTML 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 2 dari 4.
Berapa lama pelajaran “Mendapatkan Mengatur dan Menghapus Item” 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 HTML Academy ini?
Ya. Setiap pelajaran HTML 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
- localStorage vs sessionStorage
- Mendapatkan Mengatur dan Menghapus Item
- Mendengarkan Peristiwa Penyimpanan
- Keamanan Hal yang Tidak Boleh Disimpan di Penyimpanan