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. localStorage kullanarak basit JavaScript öğelerini ve dizilerini nasıl depolayabiliriz?

Apple, Mozilla 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.