JavaScript Academy · Pelajaran

Menyimpan dan Membaca Data

Gunakan setItem, getItem, dan removeItem.

Menyimpan dan Membaca Data adalah pelajaran JavaScript Academy gratis di CoddyKit. Ini adalah pelajaran 1 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.

Penyimpanan Kunci-Nilai di Browser

Web Storage menyediakan penyimpanan kunci-nilai sederhana untuk setiap asal di browser. Kedua API, localStorage dan sessionStorage, memiliki metode yang sama dan hanya menyimpan string.

Menulis dengan setItem

Simpan nilai dengan setItem(key, value). Kedua argumennya berupa string.

localStorage.setItem("theme", "dark");
localStorage.setItem("username", "ada");

Membaca dengan getItem

Ambil nilai dengan getItem(key). Jika kuncinya tidak ada, metode ini mengembalikan null, bukan undefined.

const theme = localStorage.getItem("theme"); // "dark"
const missing = localStorage.getItem("nope"); // null

Akses Properti

Anda juga dapat membaca dan menulis seperti mengakses properti objek, tetapi bentuk metode lebih jelas dan menghindari bentrokan dengan nama bawaan. Sebaiknya gunakan metode.

localStorage.theme = "light";       // works
console.log(localStorage.theme);    // "light"

Menghapus Satu Item

Hapus satu entri dengan removeItem(key). Menghapus kunci yang tidak ada tidak menimbulkan masalah dan tidak melakukan apa pun.

localStorage.removeItem("username");

Menghapus Semuanya

clear() menghapus semua kunci untuk asal current. Gunakan dengan hati-hati; tindakan ini tidak dapat dibatalkan.

localStorage.clear();

Semuanya Berupa String

Penyimpanan hanya menampung string. Angka dan nilai boolean akan diubah menjadi teks. Bacalah kembali sebagai string, lalu konversikan sesuai kebutuhan.

localStorage.setItem("count", 5);
const n = localStorage.getItem("count"); // "5" (string)
const num = Number(n);                    // 5

Menghitung Kunci

Properti length menunjukkan jumlah kunci yang tersimpan, sedangkan key(index) mengembalikan nama kunci pada suatu posisi. Ini berguna untuk melakukan iterasi.

console.log(localStorage.length);
const firstKey = localStorage.key(0);

Melakukan Iterasi pada Penyimpanan

Telusuri semua kunci yang tersimpan menggunakan length dan key(). Baca setiap nilainya saat Anda menelusurinya.

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

Memeriksa Keberadaan

Karena kunci missing mengembalikan null, Anda dapat menguji keberadaannya dengan perbandingan sederhana.

if (localStorage.getItem("token") !== null) {
  console.log("user has a token");
}

Hanya Asal yang Sama

Penyimpanan memiliki cakupan berdasarkan asal (skema + host + port). Satu situs tidak dapat membaca penyimpanan situs lain, dan http serta https dianggap sebagai asal yang berbeda.

Pemeriksaan Singkat

Membaca dan menulis Web Storage.

Ringkasan

Web Storage adalah penyimpanan kunci-nilai berupa string untuk setiap asal. Gunakan setItem, getItem (mengembalikan null jika tidak ada), removeItem, dan clear. Lakukan iterasi dengan length dan key(i). Semuanya berupa string, jadi konversikan tipenya sendiri. Penyimpanan juga terisolasi untuk setiap asal.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Menyimpan dan Membaca Data” gratis?

Ya — teks lengkap “Menyimpan dan Membaca Data” 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 “Menyimpan dan Membaca Data”?

Gunakan setItem, getItem, dan removeItem. 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 1 dari 4.

Berapa lama pelajaran “Menyimpan dan Membaca Data” 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