it-swarm.com.de

Fallback-Lösungen für HTML5 Local Storage

Ich suche nach Javascript-Bibliotheken und Code, der localStorage auf Browsern simulieren kann, die keine native Unterstützung haben.

Grundsätzlich möchte ich meine Site mit localStorage codieren, um Daten zu speichern, und wissen, dass dies auch in Browsern funktioniert, die dies nicht nativ unterstützen. Dies würde bedeuten, dass eine Bibliothek erkennen würde, ob window.localStorage Vorhanden ist, und sie verwenden würde, wenn dies der Fall ist. Ist dies nicht der Fall, wird eine Art Fallback-Methode für den lokalen Speicher erstellt, indem eine eigene Implementierung im Namespace window.localStorage Erstellt wird.

Bisher habe ich folgende Lösungen gefunden:

  1. Einfache sessionStorage Implementierung.
  2. Eine Implementierung die Cookies verwendet (nicht begeistert von dieser Idee).
  3. Dojo ist dojox.storage , aber es ist eine eigene Sache, kein wirklicher Fallback.

Ich verstehe, dass Flash und Silverlight auch für die lokale Speicherung verwendet werden können, habe aber noch nichts darüber gefunden, sie als Fallback für Standard-HTML5-localStorage zu verwenden. Vielleicht hat Google Gears diese Funktion auch?

Bitte teilen Sie alle verwandten Bibliotheken, Ressourcen oder Code-Schnipsel, die Sie gefunden haben! Ich würde besonders an reinen Javascript- oder jQuery-basierten Lösungen interessiert sein, aber ich schätze, das ist unwahrscheinlich.

109
Tauren

Ich verwende PersistJS ( Github-Repository ), das den clientseitigen Speicher nahtlos und transparent für Ihren Code verwaltet. Sie verwenden eine einzige API und erhalten Unterstützung für die folgenden Backends:

  • flash: Permanenter Flash 8-Speicher.
  • zahnräder: Google Gears-basierter permanenter Speicher.
  • localstorage: HTML5-Entwurfsspeicher.
  • whatwg_db: HTML5-Entwurfsdatenbankspeicher.
  • globalstorage: HTML5-Entwurfsspeicher (alte Spezifikation).
  • dh: Internet Explorer-Benutzerdatenverhalten.
  • cookie: Cookie-basierter permanenter Speicher.

Alle diese Optionen können deaktiviert werden, wenn Sie beispielsweise keine Cookies verwenden möchten. Mit dieser Bibliothek erhalten Sie native clientseitige Speicherunterstützung in IE 5.5+, Firefox 2.0+, Safari 3.1+ und Chrome; und Unterstützung durch Plugins, wenn der Browser über Flash oder verfügt Zahnräder: Wenn Sie Cookies aktivieren, funktioniert dies in allen Bereichen (ist jedoch auf 4 kB beschränkt).

54
josh3736

Reine JS-basierte einfache localStorage-Polyfüllung:

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);
        }
    }
}​
56
Aamir Afridi

hast du die Polyfill-Seite im Modernizr-Wiki gesehen?

https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills

suchen Sie auf dieser Seite nach dem Abschnitt "Webstorage" und Sie sehen 10 mögliche Lösungen (Stand Juli 2011).

viel Glück! Kennzeichen

19
Mark Lummus

Unten finden Sie eine aufgeräumte Version der Antwort von Aamir Afridi, in der der gesamte Code innerhalb des lokalen Bereichs eingekapselt bleibt.

Ich habe Verweise entfernt, die eine globale ret -Variable erstellen, und auch das Parsen gespeicherter "true" - und "false" -Strings in boolesche Werte innerhalb der BrowserStorage.get() -Methode entfernt, was zu Problemen führen kann, wenn man versucht tatsächlich, die Zeichenfolgen "true" oder "false" zu speichern.

Da die lokale Speicher-API nur Zeichenfolgenwerte unterstützt, können Sie JavaScript-Variablendaten zusammen mit den entsprechenden Datentypen weiterhin speichern/abrufen, indem Sie die Daten in eine JSON-Zeichenfolge codieren, die dann mit einer JSON-Codierungs-/Decodierungsbibliothek decodiert werden kann, z. 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);
        }
    };
})();
13
Steven

Ich persönlich bevorzuge amplify.js . Es hat in der Vergangenheit sehr gut funktioniert und ich habe es für alle lokalen Speicheranforderungen empfohlen.

unterstützt IE 5+, Firefox 2+, Safari 4+, Chrome, Opera 10.5+, iPhone 2+, Android = 2+ und stellt eine konsistente API zur Verfügung, um den Speicher browserübergreifend zu verwalten

10
raidfive

store.js verwendet userData und IE und localStorage in anderen Browsern.

  • Es wird nicht versucht, etwas zu komplex zu machen

  • Keine Cookies, kein Flash, keine jQuery erforderlich.

  • API bereinigen.

  • 5 kb komprimiert

https://github.com/marcuswestin/store.js

3
Mikko Ohtamaa

Die MDN-Seite für DOM-Speicherung gibt mehrere Problemumgehungen an, die Cookies verwenden.

1
alex

Liegestuhl scheint auch eine gute Alternative zu sein

ein Liegestuhl ist ein bisschen wie eine Couch, nur kleiner und außen. Perfekt für mobile HTML5-Apps, die eine leichte, anpassungsfähige, einfache und elegante Persistenzlösung benötigen.

  • sammlungen. Eine Lawnchair-Instanz besteht eigentlich nur aus einer Reihe von Objekten.
  • adaptive Persistenz. Der zugrunde liegende Speicher wird hinter einer konsistenten Schnittstelle abstrahiert.
  • steckbares Erfassungsverhalten. Manchmal brauchen wir Sammelhelfer, aber nicht immer.
1
j0k

Es gibt realstorage , das Gears als Fallback verwendet.

0
Gaurav