javascript - objeto - Soluciones de respaldo de almacenamiento local HTML5

objeto localstorage

Question

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

Básicamente, me gustaría codificar mi sitio usando localStorage para almacenar datos y saber que funcionará en los navegadores que no lo soportan de forma nativa. Esto significa que una biblioteca detectaría si window.localStorage existe y lo usaría si lo hace. Si no existe, entonces crearía algún tipo de método alternativo de almacenamiento local, al crear su propia implementación en el espacio de nombres window.localStorage .

Hasta ahora, he encontrado estas soluciones:

1. Simple sessionStorage Implementación de sessionStorage .
2. Una implementación que usa cookies (no entusiasmado con esta idea).
3. dojox.storage de Dojo, pero es lo suyo, no es realmente una alternativa.

Entiendo que Flash y Silverlight también se pueden usar para el almacenamiento local, pero no han encontrado nada sobre su uso como respaldo para el localStorage HTML5 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! Me interesarían especialmente las soluciones puras javascript o jquery, pero supongo que es poco probable.

Answer 1

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

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

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

¡buena suerte! marca

Answer 2

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

Eliminé referencias que crean una variable ret global y también eliminé el análisis de cadenas "verdaderas" y "falsas" almacenadas en valores booleanos dentro del método BrowserStorage.get() , lo que podría causar problemas si uno intenta almacenar las cadenas "verdadero" 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 adecuados codificando dichos datos en una cadena JSON, que luego puede decodificarse usando 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);
        }
    };
})();

Answer 3

Hay realstorage , que usa Gears como alternativa.

Answer 4

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

Answer 5

Personalmente prefiero amplify.js . Me ha funcionado muy bien en el pasado y lo recomendé para todas las necesidades de almacenamiento local.

admite 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

Answer 6

PoliFill 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 {
            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) {
                    ret = c.substring(nameEQ.length,c.length);
                    switch (ret) {
                      case ''true'': 
                          return true;
                      case ''false'':
                          return false;
                      default:
                          return ret;
                    }
                }
            }
            return null;
        }
    },
    del: function(name) {
        if( this.localStoreSupport() ) {
            localStorage.removeItem(name);
        }
        else {
            this.set(name,"",-1);
        }
    }
}​

Answer 7

Utilizo PersistJS ( repositorio github ), que maneja el almacenamiento del lado del cliente de manera transparente y transparente a 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 en borrador HTML5.
• whatwg_db: almacenamiento de base de datos en borrador HTML5.
• globalstorage: almacenamiento en borrador HTML5 (especificación antigua).
• es decir: comportamientos de usuario de Internet Explorer.
• cookie: almacenamiento persistente basado en cookies.

Cualquiera de estos puede inhabilitarse, por ejemplo, si 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 plugin si el navegador tiene Flash o Gears. Si habilita las cookies, funcionará en todo (pero estará limitado a 4 kB).

Answer 8

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

• No intenta hacer nada demasiado complejo

• No se necesitan cookies, ni flash, ni jQuery.

• API limpia.

• 5 kb comprimido

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

Answer 9

Lawnchair parece ser una buena alternativa también

una silla de jardín es como un sofá, excepto 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 consistente.
• Comportamiento de colección enchufable. a veces necesitamos ayudantes de colección, pero no siempre.