Fallback-Lösungen für HTML5 Local Storage

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

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

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

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

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.

Es gibt realstorage , das Gears als Fallback verwendet.