Akademi JavaScript · Pelajaran

Menyimpan Objek dengan JSON

Siri objek untuk menyimpan dan mendapatkannya semula.

Pelajaran 3 daripada 413 langkah

Menyimpan Objek dengan JSON ialah pelajaran Akademi JavaScript percuma di CoddyKit. Ini ialah pelajaran 3 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.

Store Hanya Menyimpan Rentetan

Web Storage menyimpan rentetan, jadi anda tidak boleh menyimpan objek secara terus. Menyimpannya akan menghasilkan teks yang tidak berguna, "[object Object]". Penyelesaiannya ialah JSON.

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

Menjadikan Rentetan dengan JSON.stringify

Tukarkan objek kepada rentetan JSON dengan JSON.stringify sebelum menyimpannya.

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

Menjadikan Objek dengan JSON.parse

Semasa membaca, tukarkan rentetan itu kembali kepada objek dengan JSON.parse.

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

Kitaran Pergi Balik

Pola lengkapnya: gunakan stringify semasa menyimpan dan parse semasa membaca. Ini berfungsi untuk objek dan tatasusunan.

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

Mengendalikan Kes null

JSON.parse(null) mengembalikan null (ia tidak menjana ralat), tetapi menghuraikan data yang tiada masih boleh memberikan hasil yang tidak dijangka. Sediakan nilai lalai fallback.

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

Melindungi daripada Kerosakan

Jika JSON yang disimpan tidak sah, JSON.parse menjana SyntaxError. Bungkusnya dalam try/catch supaya satu entri yang rosak tidak menyebabkan aplikasi anda terhenti.

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

Pembantu Simpan yang Boleh Digunakan Semula

Bungkus langkah stringify dalam pembantu supaya anda tidak pernah terlupa melakukannya.

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

Perkara yang Digugurkan oleh JSON

JSON tidak boleh mewakili fungsi, undefined, objek Date (yang menjadi rentetan), Map atau Set. Rancang dengan sewajarnya; simpan tarikh sebagai rentetan ISO dan bina semula tarikh itu semasa membaca.

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

Memulihkan Tarikh

Oleh sebab tarikh dijadikan rentetan semasa pensirian, tukarkannya kembali selepas penghuraian jika anda memerlukan kaedah Date.

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

Mengemas Kini Data Bersarang

Untuk mengubah sebahagian objek yang disimpan, baca objek itu, ubah salinannya dan tulis semula. Store tidak mempunyai API kemas kini separa.

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

Pemberian Versi kepada Bentuk yang Disimpan

Bentuk data aplikasi berubah mengikut masa. Menyimpan medan version membolehkan anda memindahkan atau membuang data lama apabila format berubah.

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

Semakan Pantas

Menyimpan objek dalam Web Storage.

Jawab dalam pelajaran interaktif

Ringkasan

Store menyimpan rentetan, jadi gunakan JSON.stringify pada objek sebelum menyimpannya dan JSON.parse semasa membacanya. Lindungi penghuraian dengan try/catch dan sediakan nilai lalai. Ingat bahawa JSON menggugurkan fungsi dan undefined, serta menukarkan tarikh kepada rentetan. Kemas kini data bersarang dengan membaca-mengubah-menulis, dan pertimbangkan pemberian versi kepada bentuk data yang disimpan.

Percuma untuk bermula

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

Mula belajar secara percuma Lihat kursus penuh

Soalan Lazim

Adakah pelajaran “Menyimpan Objek dengan JSON” percuma?

Ya — sebanyak 3 pelajaran dalam laluan pembelajaran Akademi JavaScript, termasuk “Menyimpan Objek dengan JSON”, 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 “Menyimpan Objek dengan JSON”?

Siri objek untuk menyimpan dan mendapatkannya semula. 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 3 daripada 4.

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

← Kembali ke Akademi JavaScript