Soluzioni di riserva per l'archiviazione locale HTML5 [chiuse]

Sto cercando librerie javascript e codice che possa simulare localStoragesu browser che non hanno supporto nativo.

Fondamentalmente, mi piacerebbe codificare il mio sito utilizzando localStorageper memorizzare i dati e sapere che funzionerà ancora sui browser che non lo supportano nativamente. Ciò significherebbe che una libreria rileverà se window.localStorageesiste e la utilizzerà se lo fa. Se non esiste, creerebbe una sorta di metodo di fallback di archiviazione locale, creando la propria implementazione nello window.localStoragespazio dei nomi.

Finora ho trovato queste soluzioni:

1. Implementazione semplice di sessionStorage .
2. Un'implementazione che utilizza i cookie (non entusiasta di questa idea).
3. Dojo's dojox.storage , ma è una cosa propria, non proprio un fallback.

Comprendo che Flash e Silverlight possono essere utilizzati anche per l'archiviazione locale, ma non ho trovato nulla sull'utilizzo come riserva per lo standard HTML5 localStorage. Forse anche Google Gears ha questa capacità?

Condividi eventuali librerie, risorse o frammenti di codice correlati che hai trovato! Sarei particolarmente interessato a puro javascript o soluzioni basate su jquery, ma suppongo che sia improbabile.

Uso PersistJS ( repository github ), che gestisce l'archiviazione lato client in modo trasparente e trasparente per il tuo codice. Utilizzi una singola API e ottieni supporto per i seguenti backend:

• flash: memoria persistente Flash 8.
• gears: archiviazione persistente basata su Google Gears.
• localstorage: archiviazione bozza HTML5.
• whatwg_db: archiviazione database bozza HTML5.
• globalstorage: archiviazione bozza HTML5 (vecchia specifica).
• ad esempio: comportamenti dei dati utente di Internet Explorer.
• cookie: archiviazione persistente basata su cookie.

Ognuno di questi può essere disabilitato, ad esempio se non si desidera utilizzare i cookie. Con questa libreria, otterrai il supporto nativo per l'archiviazione lato client in IE 5.5+, Firefox 2.0+, Safari 3.1+ e Chrome; e supporto assistito da plug-in se il browser dispone di Flash o Gears. Se abiliti i cookie, funzionerà in tutto (ma sarà limitato a 4 kB).

Polyfill di archiviazione locale semplice basato su JS puro:

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

hai visto la pagina polyfill sul wiki Modernizr?

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

cerca la sezione webstorage in quella pagina e vedrai 10 potenziali soluzioni (a partire da luglio 2011).

in bocca al lupo! marchio

Di seguito è riportata una versione riordinata della risposta di Aamir Afridi che mantiene tutto il suo codice incapsulato all'interno dell'ambito locale.

Ho rimosso i riferimenti che creano una retvariabile globale e ho anche rimosso l'analisi delle stringhe "true" e "false" memorizzate in valori booleani all'interno delBrowserStorage.get() metodo, il che potrebbe causare problemi se si cerca di memorizzare le stringhe "true" o "false".

Poiché l'API di archiviazione locale supporta solo valori stringa, è comunque possibile archiviare / recuperare dati variabili JavaScript insieme ai tipi di dati appropriati codificando tali dati in una stringa JSON, che può quindi essere decodificata utilizzando una libreria di codifica / decodifica JSON come 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);
        }
    };
})();

Personalmente preferisco amplify.js . Ha funzionato molto bene per me in passato e l'ho consigliato per tutte le esigenze di archiviazione locale.

supporta IE 5+, Firefox 2+, Safari 4+, Chrome, Opera 10.5+, iPhone 2+, Android 2+ e fornisce un'API coerente per gestire l'archiviazione cross-browser

store.js utilizza userData e IE e localStorage su altri browser.

• Non cerca di fare nulla di troppo complesso

• Nessun cookie, nessun flash, nessun jQuery necessario.

• API pulita.

• 5 kb compressi

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

La pagina MDN per l'archiviazione DOM offre diverse soluzioni alternative che utilizzano i cookie.

Anche la sedia a sdraio sembra essere una buona alternativa

una sedia a sdraio è una specie di divano, tranne che più piccola e fuori. perfetto per le app mobili html5 che necessitano di una soluzione di persistenza leggera, adattabile, semplice ed elegante.

• collezioni. un'istanza di un lettino è in realtà solo una serie di oggetti.
• persistenza adattativa. il negozio sottostante è astratto dietro un'interfaccia coerente.
• comportamento di raccolta collegabile. a volte abbiamo bisogno di aiutanti nella raccolta, ma non sempre.

C'è realstorage , che utilizza Gears come riserva.