Duyuruyu Kapat
Facebook Gözat
Twitter Gözat

localStorage

Konu, 'Javascript' kısmında sedirAğacı tarafından paylaşıldı.

  1. sedirAğacı

    sedirAğacı Daimi Üye

    Kayıt:
    2 Mart 2016
    Mesajlar:
    678
    Beğenilen Mesajlar:
    185
    Meslek:
    Bilgisayar programcısı.
    Şehir:
    Aydın
    HTML5 le geldi sanıyorum bu localStorage. javascript ile kullanabiliyorsunuz.

    Bu hafta ilk defa araştırdım ve işime yarayacağını gördüm.

    Bazı verileri, client tarafta cookie gibi saklamanıza yarıyor. Detaylı bir araştırmam olmadığı için cookie ile localStorage arasındaki farkları anlatamayacağım, ancak

    kullanımı çok kolay ve kısa.

    Ne amaçla kullanmaya başladım.?
    Buna sayfayı kişiselleştirme diyorlar.

    Sayfa yüklendikten sonra, kullanıcıya özel seçili gelmesi gereken bazı seçenekler var.
    o değerleri localStorage de saklamaya başladım.

    Sayfa yüklendikten sonra değeri localStorage dan alıyorum.
    checkBox kullanıcı tarafından değiştirilmişse onclick event ini kullanarak localStorage a son değeri atıyorum.

    Sayfadan veya browserdan çıkarsanız değerler kaybolmuyor.

    3 tane methodu değer saklamak ve kullanmak için yeterli, o kadar basit.

    Değeri saklamak için. setItem
    localStorage.setItem(myKey, myValue);

    Saklanan değeri geri almak için. getItem
    var myValue = localStorage.getItem(myKey);

    Saklanan değer kaydını gerekirse yok etmek için. removeItem
    localStorage.removeItem(myKey);

    Şimdilik böyle kullandım ancak kullanıcıya özel pek çok değer localStorage içinde saklanabilir.
     
    Son düzenleme: 30 Nisan 2017
  2. sedirAğacı

    sedirAğacı Daimi Üye

    Kayıt:
    2 Mart 2016
    Mesajlar:
    678
    Beğenilen Mesajlar:
    185
    Meslek:
    Bilgisayar programcısı.
    Şehir:
    Aydın
    Bu konu ile epey ilgilenen var. Bir kaç basit fonksiyon daha yazayım.

    Kod:
    function removeLocaleStorageItem(myKey) {
        if (typeof (Storage) !== "undefined") {
            localStorage.removeItem(myKey);
        }
    }
    function removeLocaleStorageAllItem() {
        if (typeof (Storage) !== "undefined") {
            for (var myKey in localStorage) {
                localStorage.removeItem(myKey);
            }
        }
    }
    function displayLocalStorageAllKeys() {
        for (var key in localStorage) {
            console.log(key + " - " + localStorage.getItem(key));
        }
    }
     
  3. sedirAğacı

    sedirAğacı Daimi Üye

    Kayıt:
    2 Mart 2016
    Mesajlar:
    678
    Beğenilen Mesajlar:
    185
    Meslek:
    Bilgisayar programcısı.
    Şehir:
    Aydın
    Bunlarda 2 gündür, kendi kullanımım için yazdığım fonksiyonlar.
    Biraz esnek kodladımki, lazım olduğunda farklı tiplerdeki element değerlerini hem tek satırla alabileyim, hemde tek satırla saklayabileyim.
    Çok seçimli checkBoxList (group check box) biraz uğraştırdı.

    tamamını test edemedim henüz. select option ve radio çok seçimli test etmedim.

    Biraz js biliyorsanız, kodlar pek karmaşık sayılmaz.

    Kod:
    /*
        Local storage zone - makakTG
        myElemType: Yüklü değeri saklanacak veya alınacak olan elementin tipi. checkbox, ddl, button, radio
        myElemID: Yüklü değeri saklanacak veya alınacak olan element
        myStovalID: Saklanacak değer local storage içinde hangi id ile saklanacak. Unique olmalı.
                    isim belirlerken element ismini kullan başına ve sonuna ek yap. "st_ + ilkElement id + _0" "st_ + ikinciElement id + _0" gibi.
                    başta st_  sondada _0 olmalı.
    
        Örnek:  aspx sayfa sonunda, getValStoTypes("checkboxlist", "chbxl_Gender", "st_chbxl_Gender_0");
                element onchange="setValStoTypes('checkboxlist', this.id, 'st_chbxl_Gender_0');";
                onchange="setValStoTypes('checkboxlist', this.id, 'st_chbxl_Durum_0');";
    
    */
    function setLocalStorage(myElemType, myElemID, myStovalID) {
        if (typeof (Storage) !== "undefined") {
            setValStoTypes(myElemType, myElemID, myStovalID);
        }
    }
    function getLocalStorage(myElemType, myElemID, myStovalID) {
        if (typeof (Storage) !== "undefined") {
            getValStoTypes(myElemType, myElemID, myStovalID);
        }
    }
    function getValStoTypes(myElemType, myElemID, myStovalID) {
        var myStoVal = localStorage.getItem(myStovalID);
        if (myStoVal != null && myStoVal != "") {
            var myElem = document.getElementById(myElemID);
            if (myElem != null) {
                switch (myElemType) {
                    case "checkbox": myElem.checked = myStoVal == "1" ? true : false; break;        // test OK - checkBox - tek seçimli
                    case "ddl":  myElem.value = myStoVal; break;                                    // test OK - <select options - tek seçimli
                    case "button": myElem.value = myStoVal; break;                                  // button text -
                    case "radioList": getLocStoChbxList(myElemID, myStovalID); break;               // test OK - çok seçenekli
                    case "checkboxlist": getLocStoChbxList(myElemID, myStovalID); break;            // test OK - checkBoxList - ÇOK seçimli
                }
            }
        }
    }
    
    function setValStoTypes(myElemType, myElemID, myStovalID) {
        let myVal = "";
        var myElem = document.getElementById(myElemID);
        if (myElem != null) {
            switch (myElemType) {
                case "checkbox": myVal = myElem.checked ? "1" : "0"; break;
                case "ddl":  myVal = myElem.options[myElem.selectedIndex].value; break;
                case "button": myVal = myElem.value; break;
                case "radioList": myVal = setLocStoChbxList(myElemID, myStovalID); break;
                case "checkboxlist": myVal = setLocStoChbxList(myElemID, myStovalID); break;
            }
            localStorage.setItem(myStovalID, myVal);
        }
    }
    function removeLocaleStorageItem(myStovalID) {
        if (typeof (Storage) !== "undefined") {
            localStorage.removeItem(myStovalID);
        }
    }
    function removeLocaleStorageAllItem() {
        if (typeof (Storage) !== "undefined") {
            for (var key in localStorage) {
                localStorage.removeItem(key);
            }
        }
    }
    function displayLocalStorageAllKeys() {
        for (var key in localStorage) {
            console.log(key + " - " + localStorage.getItem(key));
        }
    }
    /*
        checkboxList itemlarını alıp localStorage ye yükler.
        localStorage içinde "true,true,false,true" şeklinde tutulacak.
    */
    function setLocStoChbxList(elemID, myStovalID) {
        if (typeof (Storage) !== "undefined") {
            var myTargetElem = document.getElementById(elemID);
            var myItems = myTargetElem.getElementsByTagName("input");
            return checkboxList_getValues(myItems);
        }
        return "";
    }
    
    function checkboxList_getValues(myItems) {
        let myStr = "";
        for (var i = 0; i < myItems.length; i++) {
            if (myItems[i].checked) {
                myStr += myStr == "" ? "true" : ",true";
            }
            else {
                myStr += myStr == "" ? "false" : ",false";
            }
        }
        return myStr;
    }
    /*
        checkboxList item değerlerini alıp elemente yükler.
        localStorage içinde "true,true,false,true" şeklinde tutuluyor.
    */
    function getLocStoChbxList(elemID, myStovalID) {
        if (typeof (Storage) !== "undefined") {
            var myStoVal = localStorage.getItem(myStovalID);
            if (myStoVal != null && myStoVal != "") {
                var arr = myStoVal.split(',');
                for (var ii = 0; ii < arr.length; ii++) {
                    var myE = document.getElementById(elemID + "_" + ii);
                    if (myE != null) { myE.checked = arr[ii] == "true" || arr[ii] == true ? true : false; }
                }
            }
        }
    }
     
    Son düzenleme: 7 Mayıs 2017
  4. sanemtunc92

    sanemtunc92 Üye

    Kayıt:
    14 Nisan 2017
    Mesajlar:
    32
    Beğenilen Mesajlar:
    24
    Şehir:
    istanbul
    Kişisel ayarların saklanması için iyi bir yöntem değil bence. Adam onlarca farklı browserdan aynı anda kullanabilir siteyi. Her birinde farklı yapılandırma / özellik seçimi ile karşılaşacak.

    Daha çok tema gibi server side ı pek fazla ilgilendirmeyen durumlar için kullanılabilir. En fazla. Yapılacak çok şey vardır ama en azından kişisel ayarlar değil bana göre.
     
  5. sedirAğacı

    sedirAğacı Daimi Üye

    Kayıt:
    2 Mart 2016
    Mesajlar:
    678
    Beğenilen Mesajlar:
    185
    Meslek:
    Bilgisayar programcısı.
    Şehir:
    Aydın
    @sanemtunc92

    Bana iyi gibi görünüyor. Tek satırla oku ve tek satırla bilgiyi yaz.

    Ancak şunuda belirttim, sayfa yüklendikten sonra seçili veya ayarlı gelmesi gereken şey varsa, örneğin renk olabilir, örneğin bazı radio buttonlar veya check box lar yada drop downlistlerde bazı seçimlerin yapılmış olması gerekiyorsa. Buda kişiye özelse, bilgiyi serverden almak şart değilse kullanılabilir.

    Servere ve DB ye hiç yük bindirmeden direk client tarafta hallediyorsun.

    Farklı browserlar tabiki sorun. Ama bu sorunu cookie ilede aşamıyorsun, serverden alman gerekir.

    Kişiselleştirme bilgilerini illede sadece client tarafta yada server tarafta illede şu şekilde tutacaksın diye bir şart yok.
    Bir kısmını clientda bir kısmını serverde tutabilirsin. Hepsini server yada client da tutabilirsin.

    Bu, en verimli nasıl çalışır sorusunun cevabına bağlı. Her uygulama için sorunun cevabında değişiklikler olabilir.
     
  6. sanemtunc92

    sanemtunc92 Üye

    Kayıt:
    14 Nisan 2017
    Mesajlar:
    32
    Beğenilen Mesajlar:
    24
    Şehir:
    istanbul
    Dediğim gibi, site ile ilgili ayarlar server side olmalı. Tema falan filan client olabilir ama onda da her browser da değişecek ayarlar.
     
    sedirAğacı bunu beğendi.