JavaScript Academy · Ders

JSON ile Nesne Saklama

Nesneleri saklamak ve geri almak için serileştirin.

JSON ile Nesne Saklama, CoddyKit'te ücretsiz bir JavaScript Academy dersidir. Bu, 4 dersinin 3. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, JavaScript Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. JavaScript Academy kursu toplamda 4 dersten oluşur.

Depolama Yalnızca Dizeleri Tutar

Web Depolama dizeleri saklar; bu nedenle bir nesneyi doğrudan kaydedemezsiniz. Bir nesneyi saklamak, işe yaramayan "[object Object]" metnini üretir. Çözüm JSON kullanmaktır.

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

JSON.stringify ile Serileştirme

Saklamadan önce bir nesneyi JSON.stringify ile JSON dizesine dönüştürün.

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

JSON.parse ile Serileştirmeyi Geri Alma

Okurken dizeyi JSON.parse ile yeniden nesneye dönüştürün.

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

Gidiş-Dönüş

Tam kalıp şöyledir: girişte stringify, çıkışta parse kullanın. Bu yaklaşım nesneler ve diziler için aynı şekilde çalışır.

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

null Durumunu Ele Alma

JSON.parse(null) null döndürür (hata fırlatmaz); ancak eksik veriyi ayrıştırmak yine de sizi şaşırtabilir. Bir fallback varsayılanı sağlayın.

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

Bozulmaya Karşı Koruma

Saklanan JSON hatalı biçimlendirilmişse JSON.parse bir SyntaxError fırlatır. Tek bir hatalı girdinin uygulamanızı çökertmemesi için bunu try/catch içine alın.

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

Yeniden Kullanılabilir Kaydetme Yardımcısı

stringify adımını bir yardımcı içine alarak bunu hiçbir zaman unutmamanızı sağlayın.

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

JSON'un Saklayamadıkları

JSON; işlevleri, undefined değerini, Date nesnelerini (dizelere dönüşürler), Map veya Set nesnelerini temsil edemez. Buna göre plan yapın; tarihleri ISO dizeleri olarak saklayın ve okurken yeniden oluşturun.

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

Tarihleri Geri Yükleme

Tarihler dizelere dönüştürüldüğünden, Date yöntemlerine ihtiyacınız varsa ayrıştırma işleminden sonra onları yeniden tarihlere dönüştürün.

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

İç İçe Verileri Güncelleme

Saklanan bir nesnenin bir bölümünü değiştirmek için nesneyi okuyun, kopyasını değiştirin ve yeniden yazın. Depolamanın kısmi güncelleme API'si yoktur.

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

Saklanan Biçimleri Sürümlendirme

Uygulama verilerinin biçimleri zamanla değişir. Bir version alanı saklamak, biçim geliştiğinde eski verileri dönüştürmenize veya silmenize olanak tanır.

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

Hızlı Kontrol

Web Depolama'da nesne saklama.

Özet

Depolama dizeleri tutar; bu nedenle kaydetmeden önce nesneler üzerinde JSON.stringify, okurken de JSON.parse kullanın. Ayrıştırma işlemini try/catch ile koruyun ve varsayılan değerler sağlayın. JSON'un işlevleri ve undefined değerini saklayamadığını, tarihleri de dizelere dönüştürdüğünü unutmayın. İç içe verileri oku-değiştir-yaz yaklaşımıyla güncelleyin ve saklanan biçimlerinizi sürümlendirmeyi değerlendirin.

Sıkça Sorulan Sorular

“JSON ile Nesne Saklama” dersi ücretsiz mi?

Evet — “JSON ile Nesne Saklama” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve JavaScript Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. JavaScript Academy kursu toplamda 4 dersten oluşur.

“JSON ile Nesne Saklama” dersinde ne öğreneceğim?

Nesneleri saklamak ve geri almak için serileştirin. JavaScript Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

JavaScript Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te JavaScript Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 3. dersidir.

“JSON ile Nesne Saklama” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu JavaScript Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her JavaScript Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

Veri Saklama ve Okuma
localStorage ve sessionStorage Karşılaştırması
JSON ile Nesne Saklama
Depolama Olayları ve Sınırlar

← JavaScript Academy Sayfasına Dön