JavaScript Academy · Pelajaran

Menyimpan Objek dengan JSON

Serialisasikan objek untuk menyimpan dan mengambilnya kembali.

Menyimpan Objek dengan JSON adalah pelajaran JavaScript Academy gratis di CoddyKit. Ini adalah pelajaran 3 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 Hanya Menampung String

Web Storage menyimpan string, jadi Anda tidak dapat menyimpan objek secara langsung. Menyimpan objek akan menghasilkan teks yang tidak berguna, yaitu "[object Object]". Solusinya adalah JSON.

localStorage.setItem("user", { name: "Ada" });
console.log(localStorage.getItem("user")); // "[object Object]"

Membuat Serial dengan JSON.stringify

Konversikan objek menjadi string JSON dengan JSON.stringify sebelum menyimpannya.

const user = { name: "Ada", age: 36 };
localStorage.setItem("user", JSON.stringify(user));

Membuat Deserial dengan JSON.parse

Saat membaca, ubah string kembali menjadi objek dengan JSON.parse.

const raw = localStorage.getItem("user");
const user = JSON.parse(raw);
console.log(user.name); // "Ada"

Putaran Lengkap

Pola lengkapnya: lakukan stringifikasi saat menyimpan dan parsing saat membaca. Cara ini berlaku untuk objek maupun array.

localStorage.setItem("nums", JSON.stringify([1, 2, 3]));
const nums = JSON.parse(localStorage.getItem("nums"));
console.log(nums[0]); // 1

Menangani Kasus null

JSON.parse(null) mengembalikan null (tidak menimbulkan kesalahan), tetapi parsing data yang hilang tetap dapat memberikan hasil yang mengejutkan. Sediakan nilai fallback bawaan.

const raw = localStorage.getItem("settings");
const settings = raw ? JSON.parse(raw) : {};

Mencegah Kerusakan Data

Jika JSON yang tersimpan memiliki format yang tidak valid, JSON.parse akan melemparkan SyntaxError. Bungkusnya dalam try/catch agar satu entri yang rusak tidak membuat aplikasi Anda berhenti.

function readJSON(key, fallback) {
  try { return JSON.parse(localStorage.getItem(key)) ?? fallback; }
  catch { return fallback; }
}

Pembantu Penyimpanan yang Dapat Digunakan Kembali

Bungkus langkah stringifikasi dalam pembantu agar Anda tidak pernah lupa melakukannya.

function saveJSON(key, value) {
  localStorage.setItem(key, JSON.stringify(value));
}
saveJSON("cart", [{ id: 1, qty: 2 }]);

Hal yang Dihilangkan JSON

JSON tidak dapat merepresentasikan fungsi, undefined, objek Date (yang menjadi string), Map, atau Set. Rencanakan hal ini; simpan tanggal sebagai string ISO dan buat kembali objeknya saat membaca.

const obj = { fn: () => 1, when: new Date() };
console.log(JSON.stringify(obj)); // {"when":"2026-..."}

Memulihkan Tanggal

Karena tanggal diserialkan menjadi string, ubah kembali string tersebut setelah parsing jika Anda memerlukan metode Date.

const data = JSON.parse(localStorage.getItem("event"));
data.when = new Date(data.when);

Memperbarui Data Bertingkat

Untuk mengubah sebagian objek yang tersimpan, baca objek tersebut, ubah salinannya, lalu simpan kembali. Penyimpanan tidak memiliki API untuk pembaruan sebagian.

const cart = JSON.parse(localStorage.getItem("cart")) || [];
cart.push({ id: 9, qty: 1 });
localStorage.setItem("cart", JSON.stringify(cart));

Memberi Versi pada Struktur Data Tersimpan

Struktur data aplikasi berubah seiring waktu. Menyimpan bidang version memungkinkan Anda memigrasikan atau membuang data lama ketika formatnya berubah.

saveJSON("prefs", { version: 2, theme: "dark" });

Pemeriksaan Singkat

Menyimpan objek di Web Storage.

Ringkasan

Penyimpanan hanya menampung string, jadi gunakan JSON.stringify pada objek sebelum menyimpannya dan JSON.parse saat membacanya. Lindungi parsing dengan try/catch dan sediakan nilai bawaan. Ingat, JSON menghilangkan fungsi dan undefined, serta mengubah tanggal menjadi string. Perbarui data bertingkat dengan membaca, mengubah, lalu menyimpannya kembali, dan pertimbangkan pemberian versi pada struktur data yang tersimpan.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Menyimpan Objek dengan JSON” gratis?

Ya — teks lengkap “Menyimpan Objek dengan JSON” 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 Objek dengan JSON”?

Serialisasikan objek untuk menyimpan dan mengambilnya kembali. 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 3 dari 4.

Berapa lama pelajaran “Menyimpan Objek dengan JSON” 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