HTML5 localStorage’da Nesne Depolama

Html5’te bir JavaScript nesnesi depolamak istiyorum, ancak nesnemiz görünüşe göre bir dizeye dönüştürülüyor.

İlişkili olduğu konular : depolama, html, localstorage

Html5’te bir JavaScript nesnesi depolamak istiyorum, ancak nesnemiz görünüşe göre bir dizeye dönüştürülüyor. localStorage kullanarak basit JavaScript öğelerini ve dizilerini nasıl depolayabiliriz?


AppleMozilla ve tekrar Mozilla belgelerine bakarsak, bu işlevsellik yalnızca anahtar/değer çiftlerini işlemekle sınırlı görünüyor.

Bunun için geçici bir çözüm nesnenizi depolamadan önce dizeleştirmek ve daha sonra geri alırken ayrıştırmak olabilir:

var testObject = { 'one': 1, 'two': 2, 'three': 3 };

// objeyi depola
localStorage.setItem('testObject', JSON.stringify(testObject));

// depodan objeyi al
var retrievedObject = localStorage.getItem('testObject');

console.log('retrievedObject: ', JSON.parse(retrievedObject));

Ancak…

Stringify tüm sorunları çözmez

Yukarıdaki örnek JavaScript’te mümkün olan tüm türleri haliyle kapsamıyor. Bu nedenle bunlarla doğru şekilde nasıl başa çıkılacağına dair bazı kısa örneklere bakalım:

//Nesne ve arrayler:
    var obj = {key: "value"};
    localStorage.object = JSON.stringify(obj);  //gizli öğeleri görmezden gelecek
    obj = JSON.parse(localStorage.object);
//Boolean:
    var bool = false;
    localStorage.bool = bool;
    bool = (localStorage.bool === "true");
//Sayılar:
    var num = 42;
    localStorage.num = num;
    num = +localStorage.num;    
//Tarih:
    var date = Date.now();
    localStorage.date = date;
    date = new Date(parseInt(localStorage.date));
//Regular expressions/Düzenli ifadeler:
    var regex = /^No\.[\d]*$/i;     //örnek: "No.42".match(regex);
    localStorage.regex = regex;
    var components = localStorage.regex.match("^/(.*)/([a-z]*)$");
    regex = new RegExp(components[1], components[2]);
//Fonksiyonlar (tavsiye edilmez):
    function func(){}
    localStorage.func = func;
    eval( localStorage.func );      //fonksiyonu "func" adıyla tekrar olusturur

Fonksiyonları saklamanızı önermiyorum, çünkü eval() güvenlik, optimizasyon ve hata ayıklama ile ilgili sorunlara yol açabilir. Genel olarak da JavaScript kodunda hiçbir zaman kullanılmamalıdır.

Gizli öğeler

Nesneleri depolamak için JSON.stringify() kullanmadaki sorun, bu işlevin gizli öğeleri serileştiremeyeceğidir. Bu sorun .toString() metodu üzerine yazarak çözülebilir:

//Aleni ve gizli öğeleri olan bir nesne:
    function MyClass(privateContent, publicContent){
        var privateMember = privateContent || "defaultPrivateValue";
        this.publicMember = publicContent  || "defaultPublicValue";

        this.toString = function(){
            return '{"private": "' + privateMember + '", "public": "' + this.publicMember + '"}';
        };
    }
    MyClass.fromString = function(serialisedString){
        var properties = JSON.parse(serialisedString || "{}");
        return new MyClass( properties.private, properties.public );
    };
//Depola:
    var obj = new MyClass("invisible", "visible");
    localStorage.object = obj;
//Geri al:
    obj = MyClass.fromString(localStorage.object);

Döngüsel referanslar

stringify‘ın başa çıkamadığı bir diğer sorun da döngüsel referanslardır:

var obj = {};
obj["circular"] = obj;
localStorage.object = JSON.stringify(obj);  //Fails

Bu örnekte, “Döngüsel yapıyı JSON’a dönüştürme”‘de JSON.stringify() bir TypeError hatası verir. Eğer döngüsel referansların depolanması isteniyorsa, JSON.stringify()‘ın ikinci parametresi kullanılabilir:

var obj = {id: 1, sub: {}};
obj.sub["circular"] = obj;
localStorage.object = JSON.stringify( obj, function( key, value) {
    if( key == 'circular') {
        return "$ref"+value.id+"$";
    } else {
        return value;
    }
});

Ancak, döngüsel referansları depolamak için etkili bir çözüm bulmak, genelde çözülmesi gereken işe bağlıdır ve bu tür verileri geri yüklemek de basit değildir.

Bu yazı topluluk tarafından oluşturuldu. Lisans bilgisine bakabilirsiniz. Yanlış veya eksik bilgileri düzenlemek için github üzerinden katkıda bulunabilirsiniz.

Kategoriler: Yazı, HTML

Okumaya devam et!

Yerel test sunucusu nasıl kurulur?

Bu makalede, makinenizde basit bir yerel test sunucusunun nasıl kurulacağı ve nasıl kullanılacağına ilişkin temel bilgilere bakacağız.

object’ten iframe’e – diğer gömme teknolojileri

Şimdiye kadar, web sayfalarınıza resim, video ve ses de dahil olmak üzere bir şeyler gömmeye alışmış olmalısınız.

Web sitenizi yayımlama

Kod yazmayı ve web sitenizi oluşturan dosyaları düzenlemeyi tamamladıktan sonra, insanların bulabilmesi için hepsini çevrimiçi hale getirmeniz gerekir.

HTML sayfasından yönlendirme nasıl yapılır?

Bunun için birden fazla yöntem bulunuyor: 1.

Yorum Gönderin

E-posta hesabınız yayımlanmayacak.

koddla
Tema Mundana by WowThemes.net.