Soluciones de respaldo de almacenamiento local HTML5 [cerrado]

Estoy buscando códigos y bibliotecas de JavaScript que puedan simular localStorageen navegadores que no tienen soporte nativo.

Básicamente, me gustaría codificar mi sitio localStoragepara almacenar datos y saber que aún funcionará en navegadores que no lo admitan de forma nativa. Esto significaría que una biblioteca detectaría si window.localStorageexiste y la usaría si existe. Si no existe, entonces crearía algún tipo de método alternativo de almacenamiento local, creando su propia implementación en el window.localStorageespacio de nombres.

Hasta ahora, he encontrado estas soluciones:

1. Implementación de sessionStorage simple .
2. Una implementación que utiliza cookies (no está encantada con esta idea).
3. Dojox.storage de Dojo , pero es algo propio, no una alternativa.

Entiendo que Flash y Silverlight también se pueden usar para almacenamiento local, pero no he encontrado nada sobre su uso como respaldo para HTML5 localStorage estándar. ¿Quizás Google Gears también tiene esta capacidad?

Comparta las bibliotecas, los recursos o los fragmentos de código relacionados que haya encontrado. Estaría especialmente interesado en soluciones basadas en javascript puro o jquery, pero supongo que es poco probable.

Yo uso PersistJS ( repositorio de github ), que maneja el almacenamiento del lado del cliente de manera transparente y sin problemas para su código. Utiliza una única API y obtiene soporte para los siguientes backends:

• flash: almacenamiento persistente de Flash 8.
• engranajes: almacenamiento persistente basado en Google Gears.
• localstorage: almacenamiento de borradores HTML5.
• whatwg_db: almacenamiento de base de datos en borrador HTML5.
• globalstorage: almacenamiento de borradores HTML5 (especificación anterior).
• es decir: comportamientos de datos de usuario de Internet Explorer.
• cookie: almacenamiento persistente basado en cookies.

Cualquiera de ellos puede desactivarse, si, por ejemplo, no desea utilizar cookies. Con esta biblioteca, obtendrá soporte de almacenamiento nativo del lado del cliente en IE 5.5+, Firefox 2.0+, Safari 3.1+ y Chrome; y soporte asistido por complementos si el navegador tiene Flash o Gears. Si habilita las cookies, funcionará en todo (pero estará limitado a 4 kB).

Polyfill de almacenamiento local simple basado en JS puro:

Demostración: 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);
        }
    }
}​

¿Has visto la página de polyfill en el wiki de Modernizr?

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

busque la sección de almacenamiento web en esa página y verá 10 posibles soluciones (a partir de julio de 2011).

¡buena suerte! marca

A continuación se muestra una versión ordenada de la respuesta de Aamir Afridi que mantiene todo su código encapsulado dentro del alcance local.

Eliminé las referencias que crean una retvariable global y también eliminé el análisis de las cadenas almacenadas "verdaderas" y "falsas" en valores booleanos dentro del BrowserStorage.get()método, lo que podría causar problemas si uno está tratando de almacenar las cadenas "verdaderas" o "falso".

Dado que la API de almacenamiento local solo admite valores de cadena, aún se pueden almacenar / recuperar datos variables de JavaScript junto con sus tipos de datos apropiados codificando dichos datos en una cadena JSON, que luego se puede decodificar utilizando una biblioteca de codificación / decodificación JSON como 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 prefiero amplify.js . Me ha funcionado muy bien en el pasado y lo recomendé para todas las necesidades de almacenamiento local.

es compatible con IE 5+, Firefox 2+, Safari 4+, Chrome, Opera 10.5+, iPhone 2+, Android 2+ y proporciona una API consistente para manejar el almacenamiento entre navegadores

store.js usa userData e IE y localStorage en otros navegadores.

• No intenta hacer nada demasiado complejo

• Sin cookies, sin flash, sin jQuery.

• API limpia.

• 5 kb comprimido

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

La página MDN para el almacenamiento DOM ofrece varias soluciones que utilizan cookies.

La silla de jardín también parece ser una buena alternativa

una silla de jardín es como un sofá, excepto que es más pequeña y exterior. perfecto para aplicaciones móviles html5 que necesitan una solución de persistencia ligera, adaptable, simple y elegante.

• colecciones. una instancia de silla de jardín es en realidad una serie de objetos.
• persistencia adaptativa. la tienda subyacente se abstrae detrás de una interfaz coherente.
• comportamiento de colección conectable. a veces necesitamos ayudantes de recopilación, pero no siempre.

Existe realstorage , que usa Gears como alternativa.