Fallback-Lösungen für HTML5 Local Storage [geschlossen]

Ich suche nach Javascript-Bibliotheken und Code, die localStoragein Browsern ohne native Unterstützung simuliert werden können .

Grundsätzlich möchte ich meine Website localStoragezum Speichern von Daten codieren und wissen, dass sie auch in Browsern funktioniert, die sie nicht nativ unterstützen. Dies würde bedeuten, dass eine Bibliothek window.localStorageerkennt , ob sie vorhanden ist, und sie verwendet, wenn dies der Fall ist. Wenn es nicht vorhanden ist, wird eine Art Fallback-Methode für den lokalen Speicher erstellt, indem eine eigene Implementierung im window.localStorageNamespace erstellt wird.

Bisher habe ich folgende Lösungen gefunden:

1. Einfache Implementierung von sessionStorage .
2. Eine Implementierung , die Cookies verwendet (von dieser Idee nicht begeistert).
3. Dojos dojox.storage , aber es ist seine eigene Sache, nicht wirklich einen Rückfall.

Ich verstehe, dass Flash und Silverlight auch für den lokalen Speicher verwendet werden können, habe aber 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 Codefragmente, die Sie gefunden haben! Ich würde mich besonders für reine Javascript- oder JQuery-basierte Lösungen interessieren, aber ich denke, das ist unwahrscheinlich.

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

• Flash: Dauerhafter Flash 8-Speicher.
• Zahnräder: Google Gears-basierter persistenter Speicher.
• localstorage: HTML5-Entwurfsspeicher.
• whatwg_db: HTML5-Entwurfsdatenbankspeicher.
• globalstorage: HTML5-Entwurfsspeicher (alte Spezifikation).
• dh: Verhalten der Internet Explorer-Benutzerdaten.
• Cookie: Cookie-basierter persistenter 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 Plugin-unterstützte Unterstützung, wenn der Browser über Flash oder Gears verfügt. Wenn Sie Cookies aktivieren, funktioniert dies in allen Bereichen (ist jedoch auf 4 KB begrenzt).

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

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

Unten finden Sie eine aufgeräumte Version der Antwort von Aamir Afridi, in der der gesamte Code im lokalen Bereich enthalten ist.

Ich habe Referenzen entfernt, die eine globale retVariable erstellen , und auch das Parsen von gespeicherten "true" - und "false" -Strings in boolesche Werte innerhalb der BrowserStorage.get()Methode entfernt, was zu Problemen führen kann, wenn versucht wird, die Strings tatsächlich "true" oder "true" zu speichern "falsch".

Da die lokale Speicher-API nur Zeichenfolgenwerte unterstützt, können JavaScript-Variablendaten zusammen mit den entsprechenden Datentypen gespeichert / abgerufen werden, indem diese Daten in eine JSON-Zeichenfolge codiert werden, die dann mithilfe einer JSON-Codierungs- / Decodierungsbibliothek wie https: decodiert werden kann. //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);
        }
    };
})();

Ich persönlich bevorzuge amplify.js . Es hat in der Vergangenheit sehr gut für mich 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 bietet eine konsistente API für den browserübergreifenden Speicher

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

• Es wird nicht versucht, etwas zu Komplexes zu tun

• Keine Cookies, kein Flash, keine jQuery erforderlich.

• API bereinigen.

• 5 kb komprimiert

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

Die MDN-Seite für den DOM-Speicher enthält mehrere Problemumgehungen, bei denen Cookies verwendet werden.

Rasenstuhl scheint auch eine gute Alternative zu sein

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

• Sammlungen. Eine Liegestuhlinstanz ist eigentlich nur eine Reihe von Objekten.
• adaptive Persistenz. Der zugrunde liegende Speicher wird hinter einer konsistenten Schnittstelle abstrahiert.
• steckbares Erfassungsverhalten. Manchmal brauchen wir Sammlungshelfer, aber nicht immer.

Es gibt Realstorage , das Gears als Fallback verwendet.