JavaScript Nesnelerini HTML5 localStorage ve sessionStorage'da depolamak

JavaScript Nesnelerini HTML5 localStorage ve sessionStorage'da depolamak
JavaScript Nesnelerini HTML5 localStorage ve sessionStorage'da depolamak
Liam Lambert
11 Temmuz 2024 Perşembe 21:58:13

Web Depolama Alanındaki Nesnelerle Çalışma

Geliştiriciler, HTML5 localStorage veya sessionStorage ile çalışırken, JavaScript nesnelerini depolamaya çalışırken sıklıkla sorunlarla karşılaşırlar. İlkel veri türleri ve dizilerden farklı olarak nesneler dizelere dönüştürülmüş gibi görünür ve bu da karışıklığa ve beklenmedik sonuçlara yol açabilir.

Web Depolamayı kullanarak nesnelerin nasıl düzgün bir şekilde saklanacağını ve alınacağını anlamak birçok web uygulaması için çok önemlidir. Bu kılavuz, nesnelerin neden dizelere dönüştürüldüğünü açıklayacak ve nesnelerinizin doğru şekilde saklanmasını ve alınmasını sağlamak için basit bir geçici çözüm sağlayacaktır.

Emretmek Tanım
JSON.stringify() Bir JavaScript nesnesini veya değerini bir JSON dizesine dönüştürerek localStorage veya sessionStorage'da depolamaya izin verir.
localStorage.setItem() LocalStorage nesnesinde bir anahtar/değer çiftini saklayarak verilerin tarayıcı oturumlarında kalıcı olmasını sağlar.
localStorage.getItem() LocalStorage'dan belirli bir anahtarla ilişkili değeri alır.
JSON.parse() Bir JSON dizesini ayrıştırır ve onu tekrar bir JavaScript nesnesine dönüştürerek karmaşık veri yapılarının alınmasını sağlar.
sessionStorage.setItem() SessionStorage nesnesinde bir anahtar/değer çifti depolayarak verilerin sayfa oturumu süresince kalıcı olmasını sağlar.
sessionStorage.getItem() Belirli bir anahtarla ilişkili değeri sessionStorage'dan alır.

Nesneleri Web Depolama Alanında Etkin Bir Şekilde Depolama ve Alma

JavaScript'te, localStorage Ve sessionStorage anahtar/değer çiftlerini tarayıcıya kaydetmenize olanak tanıyan web depolama nesneleridir. Bununla birlikte, bu depolama çözümleri yalnızca dizeleri destekler; bu, bir JavaScript nesnesini doğrudan depolamaya çalışmanın, nesnenin aşağıdaki gibi bir dize temsiline dönüştürülmesiyle sonuçlanacağı anlamına gelir: [object Object]. Nesneleri etkili bir şekilde depolamak için bunları kullanarak bir JSON dizesine dönüştürmeniz gerekir. JSON.stringify(). Bu yöntem bir JavaScript nesnesi alır ve içinde saklanabilecek bir JSON dizesi döndürür. localStorage veya sessionStorage.

Saklanan nesneyi almak için JSON dizesini kullanarak tekrar bir JavaScript nesnesine dönüştürmeniz gerekir. JSON.parse(). Bu yöntem bir JSON dizesi alır ve karşılık gelen JavaScript nesnesini döndürür. Yukarıdaki örneklerde verilen komut dosyaları bu süreci göstermektedir. Öncelikle bir nesne oluşturulur ve JSON dizesine dönüştürülür. JSON.stringify() saklanmadan önce localStorage kullanarak localStorage.setItem(). Nesneyi almak için JSON dizesi şuradan getirilir: localStorage kullanarak localStorage.getItem() ve ardından kullanılarak bir JavaScript nesnesine geri ayrıştırılır. JSON.parse().

localStorage'da JavaScript Nesnelerini Depolama ve Alma

localStorage için JavaScript ve JSON kullanma

// Create an object
var testObject = {'one': 1, 'two': 2, 'three': 3};

// Convert the object to a JSON string and store it in localStorage
localStorage.setItem('testObject', JSON.stringify(testObject));

// Retrieve the JSON string from localStorage and convert it back to an object
var retrievedObject = JSON.parse(localStorage.getItem('testObject'));

// Verify the type and value of the retrieved object
console.log('typeof retrievedObject: ' + typeof retrievedObject);
console.log('Value of retrievedObject: ', retrievedObject);

// Output should be:
// typeof retrievedObject: object
// Value of retrievedObject: { one: 1, two: 2, three: 3 }

SessionStorage'da JavaScript Nesnelerini Depolama ve Alma

SessionStorage için JavaScript ve JSON kullanma

// Create an object
var testObject = {'one': 1, 'two': 2, 'three': 3};

// Convert the object to a JSON string and store it in sessionStorage
sessionStorage.setItem('testObject', JSON.stringify(testObject));

// Retrieve the JSON string from sessionStorage and convert it back to an object
var retrievedObject = JSON.parse(sessionStorage.getItem('testObject'));

// Verify the type and value of the retrieved object
console.log('typeof retrievedObject: ' + typeof retrievedObject);
console.log('Value of retrievedObject: ', retrievedObject);

// Output should be:
// typeof retrievedObject: object
// Value of retrievedObject: { one: 1, two: 2, three: 3 }

Web Depolama için Gelişmiş Teknikler

HTML5 kullanırken localStorage Ve sessionStoragegeliştiricilerin genellikle dizelerden daha karmaşık verileri depolaması gerekir. JSON serileştirme ve seri durumdan çıkarma, temel nesneler için etkili olsa da, daha gelişmiş senaryolar ek hususlar gerektirebilir. Örneğin, derinlemesine iç içe geçmiş nesnelerle veya yöntemler içeren nesnelerle çalışıyorsanız, daha karmaşık bir yaklaşıma ihtiyacınız vardır. Yaygın bir teknik, aşağıdaki gibi bir kütüphane kullanmaktır: Flatted veya circular-json döngüsel referansları ve daha karmaşık nesne yapılarını yönetmek için.

Bu kütüphaneler standardı genişletiyor JSON.stringify() Ve JSON.parse() Döngüsel referanslarla nesnelerin serileştirilmesini ve seri durumdan çıkarılmasını destekleyen yöntemler, nesnelerin web depolama alanında depolanması için daha sağlam bir çözüm sağlar. Bir diğer husus veri sıkıştırmadır. Büyük nesneler için aşağıdaki gibi kütüphaneleri kullanabilirsiniz: LZ-String Verileri saklamadan önce sıkıştırmak için localStorage veya sessionStoragekullanılan alan miktarını azaltır. Bu, özellikle önemli miktarda istemci tarafı verisini depolaması gereken uygulamalar için yararlı olabilir.

Nesnelerin Web Depolama Alanında Saklanmasıyla İlgili Sık Sorulan Sorular

  1. İşlevleri içinde saklayabilir miyim? localStorage veya sessionStorage?
  2. Hayır, işlevler doğrudan web depolama alanında saklanamaz. İşlev kodunu bir dize olarak saklayabilir ve kullanabilirsiniz. eval() yeniden oluşturmak için kullanılabilir ancak güvenlik riskleri nedeniyle bu genellikle önerilmez.
  3. Nesnelerdeki döngüsel referansları nasıl ele alabilirim?
  4. Gibi kütüphaneleri kullanın Flatted veya circular-json JavaScript nesnelerindeki döngüsel referansları işlemek için tasarlanmıştır.
  5. Depolama sınırı nedir? localStorage?
  6. Şunun için depolama sınırı: localStorage Genellikle 5 MB civarındadır ancak tarayıcılar arasında değişiklik gösterebilir.
  7. Verileri saklamadan önce sıkıştırabilir miyim?
  8. Evet, gibi kütüphaneleri kullanabilirsiniz LZ-String verilerinizi saklamadan önce sıkıştırmak için localStorage veya sessionStorage.
  9. Bir dizi nesneyi nasıl saklarım?
  10. Diziyi kullanarak bir JSON dizesine dönüştürün JSON.stringify() saklamadan önce localStorage veya sessionStorage.
  11. Hassas verileri depolamak güvenli mi? localStorage?
  12. Hayır, hassas verileri depolamak güvenli değil localStorage JavaScript aracılığıyla erişilebildiğinden ve site saldırıya uğradığında tehlikeye girebileceğinden.
  13. Kullanabilirmiyim localStorage farklı alanlarda mı?
  14. HAYIR, localStorage aynı kaynakla sınırlıdır, yani farklı alan adlarından erişilemez.
  15. Kullanıcı tarayıcı verilerini temizlerse ne olur?
  16. Saklanan tüm veriler localStorage Ve sessionStorage Kullanıcı tarayıcı verilerini temizlerse kaldırılacaktır.

Nesne Depolamayı Yönetmeye İlişkin Son Düşünceler

Nesneleri HTML5 web depolama alanında etkili bir şekilde depolamak ve almak, nesnelerin JSON dizelerine dönüştürülmesini gerektirir. JSON.stringify() ve sonra bunları geri ayrıştırmak JSON.parse(). Bu yöntem, verilerin farklı tarayıcı oturumlarında bozulmadan ve kullanılabilir durumda kalmasını sağlar. Geliştiriciler, bu teknikleri anlayarak ve kullanarak, daha karmaşık veri yönetimi görevleri için localStorage ve sessionStorage'dan yararlanabilir ve web uygulamalarının işlevselliğini ve performansını artırabilir.