HTML5 Yerel Depolama yedek çözümleri [kapalı]


119

localStorageYerel desteği olmayan tarayıcılarda simüle edilebilecek javascript kitaplıkları ve kodu arıyorum .

Temel olarak, sitemi localStorageveri depolamak için kullanarak kodlamak istiyorum ve yine de onu yerel olarak desteklemeyen tarayıcılarda çalışacağını biliyorum. Bu, bir kütüphanenin window.localStoragevar olup olmadığını tespit edeceği ve varsa onu kullanacağı anlamına gelir. Mevcut değilse, window.localStoragead alanında kendi uygulamasını oluşturarak bir tür yerel depolama geri dönüş yöntemi oluşturur .

Şimdiye kadar şu çözümleri buldum:

  1. Basit sessionStorage uygulaması.
  2. Çerezleri kullanan bir uygulama (bu fikirden memnun değil).
  3. Dojo'nun dojox.storage'ı , ancak bu kendi işi, gerçekten bir geri dönüş değil.

Flash ve Silverlight'ın yerel depolama için de kullanılabileceğini anlıyorum, ancak bunları standart HTML5 localStorage için yedek olarak kullanmayla ilgili hiçbir şey bulamadım. Belki Google Gears da bu yeteneğe sahiptir?

Lütfen bulduğunuz ilgili kitaplıkları, kaynakları veya kod parçacıklarını paylaşın! Özellikle saf javascript veya jquery tabanlı çözümlerle ilgilenirim, ancak bunun olası olmadığını tahmin ediyorum.


sessionStorage ve localStorage, Web Depolama spesifikasyonunun ( dev.w3.org/html5/webstorage ) bir parçasıdır . Tek fark, tarayıcının verileri ne kadar süre tutacağıdır. Sanırım birine sahip olduğunuz ancak diğerine sahip olmadığınız bir uygulama bulamayacaksınız (ancak% 100 emin değilim)
rlovtang

1
Geçtiğimiz Şubat ayında Gears'ın resmi olarak boşaltıldığını belirtmekte fayda var - bunun üzerine bir şey inşa etmem.
josh3736

@rlovtang: teşekkürler, oturum ve yerel depolama arasındaki farkın farkındayım. 24ways.org makalesine göre (söz konusu ilk bağlantı, çözüm 1), Chrome yalnızca localStorage'ı destekler, sessionStorage'ı desteklemez. Belki de bu makale bir süre önce yazıldığı için artık durum böyle değildir.
Tauren

@ josh3736: Evet, kişisel olarak tanımlama bilgilerini ve donanımları kullanmaktan kaçınmak isterim. Kesinlikle buna bağlı bir şey inşa etmem, ancak onu kuran biri için bir yedek depolama mekanizması olsaydı ve doğrudan ona kod yazmadıysam, kullanılabilirdi.
Tauren

bu yüzden aslında yanılmışım :) Chrome'un bir zamanlar localStorage desteği olduğunu bilmiyordum ama sessionStorage'ı desteklemiyordu. Chrome, en azından şu anda her ikisini de destekliyor.
rlovtang

Yanıtlar:


56

İstemci tarafı depolamayı kodunuza göre sorunsuz ve şeffaf bir şekilde yöneten PersistJS ( github deposu ) kullanıyorum . Tek bir API kullanırsınız ve aşağıdaki arka uçlar için destek alırsınız:

  • flash: Flash 8 kalıcı depolama.
  • gears: Google Gears tabanlı kalıcı depolama.
  • localstorage: HTML5 taslak depolama.
  • whatwg_db: HTML5 taslak veritabanı depolama.
  • globalstorage: HTML5 taslak depolama (eski özellik).
  • yani: Internet Explorer kullanıcı verileri davranışları.
  • tanımlama bilgisi: Tanımlama bilgisi tabanlı kalıcı depolama.

Bunlardan herhangi biri devre dışı bırakılabilir - örneğin, tanımlama bilgilerini kullanmak istemiyorsanız. Bu kitaplıkla, IE 5.5+, Firefox 2.0+, Safari 3.1+ ve Chrome'da yerel istemci tarafı depolama desteği alacaksınız; ve tarayıcıda Flash veya Gears varsa eklenti destekli destek. Çerezleri etkinleştirirseniz, her şeyde çalışacaktır (ancak 4 kB ile sınırlı olacaktır).


10
PersistJS hala destekleniyor mu? Tarayıcının yükseltildiği ve seçilen depolama yönteminin değiştiği bir sorunu nasıl çözdüğünü merak ediyorum (yerel depolamanın kullanılabilir hale geldiğini söyleyin). Eski konum erişilemez hale geliyor mu?
jcalfee314

2
En azından artık aktif geliştirme aşamasında gibi görünmüyor.
Mahn

Bu çok cüretkar bir kütüphane. Çoğu teknolojide maksimum boyut hakkında herhangi bir bilgi sahibi olmadan, uygulamamızın çok fazla şansla çalıştığından memnun olmalıyız ... Ayrıca bu, 64KB'den az tasarruf etmek istiyorsanız yalnızca bir çözüm gibi görünüyor.
ahbap

@julmot Bir kütüphane bunun için. Sıkıcı şeyleri soyutlarken kolaylık sağlayın. Yeterli araştırma ve zamanla, maksimum boyuttan bağımsız olarak, genellikle nasıl çalıştırılacağını anlayabilirsiniz. Tabii ki, bu projenin yazarı çok fazla olduğuna karar vermiş gibi görünüyor ...
William

Bunun Safari Özel Tarama modunda çalışıp çalışmadığını biliyor musunuz? Şu anda, localStorage'ın hem macOS hem de iOS Safari'de Özel Gezinme'de desteklenmemesine neden olan bir sorun yaşıyorum.
Austin

61

Saf JS tabanlı basit localStorage polyfill:

Demo: http://jsfiddle.net/aamir/S4X35/

HTML:

<a href='#' onclick="store.set('foo','bar')">set key: foo, with value: bar</a><br/>
<a href='#' onclick="alert(store.get('foo'))">get key: foo</a><br/>
<a href='#' onclick="store.del('foo')">delete key: foo</a>​

JS:

window.store = {
    localStoreSupport: function() {
        try {
            return 'localStorage' in window && window['localStorage'] !== null;
        } catch (e) {
            return false;
        }
    },
    set: function(name,value,days) {
        if (days) {
            var date = new Date();
            date.setTime(date.getTime()+(days*24*60*60*1000));
            var expires = "; expires="+date.toGMTString();
        }
        else {
            var expires = "";
        }
        if( this.localStoreSupport() ) {
            localStorage.setItem(name, value);
        }
        else {
            document.cookie = name+"="+value+expires+"; path=/";
        }
    },
    get: function(name) {
        if( this.localStoreSupport() ) {
            var ret = localStorage.getItem(name);
            //console.log(typeof ret);
            switch (ret) {
              case 'true': 
                  return true;
              case 'false':
                  return false;
              default:
                  return ret;
            }
        }
        else {
            // cookie fallback
            /*
             * after adding a cookie like
             * >> document.cookie = "bar=test; expires=Thu, 14 Jun 2018 13:05:38 GMT; path=/"
             * the value of document.cookie may look like
             * >> "foo=value; bar=test"
             */
            var nameEQ = name + "=";  // what we are looking for
            var ca = document.cookie.split(';');  // split into separate cookies
            for(var i=0;i < ca.length;i++) {
                var c = ca[i];  // the current cookie
                while (c.charAt(0)==' ') c = c.substring(1,c.length);  // remove leading spaces
                if (c.indexOf(nameEQ) == 0) {  // if it is the searched cookie
                    var ret = c.substring(nameEQ.length,c.length);
                    // making "true" and "false" a boolean again.
                    switch (ret) {
                      case 'true':
                          return true;
                      case 'false':
                          return false;
                      default:
                          return ret;
                    }
                }
            }
            return null; // no cookie found
        }
    },
    del: function(name) {
        if( this.localStoreSupport() ) {
            localStorage.removeItem(name);
        }
        else {
            this.set(name,"",-1);
        }
    }
}​

4
Bu neden tanınmıyor !? Teşekkürler dostum!
Robert

4
:) - İhtiyacım olan her şey için tam bir kitaplık eklemeyi sevmiyorum.
Aamir Afridi'nin

2
JavaScript'te var expiresyerel olarak ve ardından başka kapsamda kullanıcı tanımlamasına izin verilir mi? in functionset
happy_marmoset

3
Çerez üzerinde bir son kullanma tarihine izin verirken localStorage'ın asla sona ermeyeceğini belirtmek istedim. Bu, sona erecek bir şey arıyorsanız bazı sorunlara neden olabilir. Yerel depoya bir son kullanma tarihi eklemek ve ardından hala geçerli olup olmadığını görmek için tarih karşılaştırmaları yapmak faydalı olabilir. Tabii ki, son kullanma tarihine ihtiyacınız varsa, sadece bir çerez kullanmanız gerektiğini savunuyorum. Ancak bence bu komut dosyası, şu anda olduğu gibi tutarsız olmaktansa, her ikisi için de sürenin dolmasına izin vermemeli veya izin vermemeli.
Hanna

1
@MohsinSaeed özel modda, tarayıcının da çerez oluşturmanıza izin vermeyeceğini düşünüyorum. superuser.com/questions/589248/…
Aamir Afridi


14

Aşağıda, Aamir Afridi'nin yanıtının, tüm kodunu yerel kapsam içinde tutan düzenli bir versiyonu bulunmaktadır.

Global bir retdeğişken oluşturan ve ayrıca depolanan "true" ve "false" dizelerinin BrowserStorage.get()yöntem içindeki boole değerlerine ayrıştırılmasını kaldıran referansları kaldırdım; bu, biri aslında "true" veya "true" dizelerini depolamaya çalışıyorsa sorunlara neden olabilir. "yanlış".

Yerel depolama API'si yalnızca dize değerlerini desteklediğinden, söz konusu verileri bir JSON dizesine kodlayarak ve daha sonra https: //github.com/douglascrockford/JSON-js

var BrowserStorage = (function() {
    /**
     * Whether the current browser supports local storage as a way of storing data
     * @var {Boolean}
     */
    var _hasLocalStorageSupport = (function() {
        try {
            return 'localStorage' in window && window['localStorage'] !== null;
        } catch (e) {
            return false;
        }
    })();

    /**
     * @param {String} name The name of the property to read from this document's cookies
     * @return {?String} The specified cookie property's value (or null if it has not been set)
     */
    var _readCookie = function(name) {
        var nameEQ = name + "=";
        var ca = document.cookie.split(';');
        for (var i = 0; i < ca.length; i++) {
            var c = ca[i];
            while (c.charAt(0) == ' ') c = c.substring(1, c.length);
            if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
        }

        return null;
    };

    /**
     * @param {String} name The name of the property to set by writing to a cookie
     * @param {String} value The value to use when setting the specified property
     * @param {int} [days] The number of days until the storage of this item expires
     */
    var _writeCookie = function(name, value, days) {
        var expiration = (function() {
            if (days) {
                var date = new Date();
                date.setTime(date.getTime() + (days*24*60*60*1000));
                return "; expires=" + date.toGMTString();
            }
            else {
                return "";
            }
        })();

        document.cookie = name + "=" + value + expiration + "; path=/";
    };

    return {
        /**
         * @param {String} name The name of the property to set
         * @param {String} value The value to use when setting the specified property
         * @param {int} [days] The number of days until the storage of this item expires (if storage of the provided item must fallback to using cookies)
         */
        set: function(name, value, days) {
            _hasLocalStorageSupport
                ? localStorage.setItem(name, value)
                : _writeCookie(name, value, days);
        },

        /**
         * @param {String} name The name of the value to retrieve
         * @return {?String} The value of the 
         */
        get: function(name) {
            return _hasLocalStorageSupport
                ? localStorage.getItem(name) 
                : _readCookie(name);
        },

        /**
         * @param {String} name The name of the value to delete/remove from storage
         */
        remove: function(name) {
            _hasLocalStorageSupport
                ? localStorage.removeItem(name)
                : this.set(name, "", -1);
        }
    };
})();

10

Şahsen amplify.js'yi tercih ediyorum . Geçmişte benim için gerçekten iyi çalıştı ve tüm yerel depolama ihtiyaçları için tavsiye ettim.

IE 5+, Firefox 2+, Safari 4+, Chrome, Opera 10.5+, iPhone 2+, Android 2+ sürümlerini destekler ve tarayıcılar arası depolamayı işlemek için tutarlı bir API sağlar




1

Çim sandalyesi de iyi bir alternatif gibi görünüyor

Bir çim sandalye, daha küçük ve dış dışında bir kanepe gibi bir sorta. hafif, uyarlanabilir, basit ve zarif bir kalıcılık çözümüne ihtiyaç duyan html5 mobil uygulamaları için mükemmel.

  • koleksiyonları. bir çim sandalye örneği gerçekten sadece bir nesneler dizisidir.
  • uyarlanabilir kalıcılık. temel mağaza, tutarlı bir arayüzün arkasında özetlenmiştir.
  • takılabilir toplama davranışı. bazen koleksiyon yardımcılarına ihtiyacımız var ama her zaman değil.

0

Gears'ı bir yedek olarak kullanan yeniden depolama var .


Teşekkürler. Ne yazık ki, @ josh3736'nın PersistJS önerisinden daha az tarayıcıyı destekliyor gibi görünüyor. Yine de ona bir göz atacağım ve öneriyi takdir edeceğim.
Tauren
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.