Solutions de secours du stockage local HTML5 [fermé]

Je recherche des bibliothèques javascript et du code pouvant simuler localStoragesur des navigateurs qui n'ont pas de support natif.

Fondamentalement, j'aimerais coder mon site en utilisant localStoragepour stocker des données et savoir qu'il fonctionnera toujours sur les navigateurs qui ne le prennent pas en charge de manière native. Cela signifierait qu'une bibliothèque détecte si elle window.localStorageexiste et l'utilise si elle le fait. S'il n'existe pas, il créerait une sorte de méthode de secours de stockage local, en créant sa propre implémentation dans l' window.localStorageespace de noms.

Jusqu'à présent, j'ai trouvé ces solutions:

1. Implémentation simple de sessionStorage .
2. Une implémentation qui utilise des cookies (pas ravie de cette idée).
3. Dojo's dojox.storage , mais c'est son propre truc, pas vraiment une solution de secours.

Je comprends que Flash et Silverlight peuvent également être utilisés pour le stockage local, mais je n'ai rien trouvé sur leur utilisation comme solution de secours pour HTML5 localStorage standard. Peut-être que Google Gears a également cette capacité?

Veuillez partager toutes les bibliothèques, ressources ou extraits de code associés que vous avez trouvés! Je serais particulièrement intéressé par les solutions purement javascript ou jquery, mais je suppose que c'est peu probable.

J'utilise PersistJS ( référentiel github ), qui gère le stockage côté client de manière transparente et transparente à votre code. Vous utilisez une seule API et bénéficiez d'une assistance pour les backends suivants:

• flash: stockage persistant Flash 8.
• gears: stockage persistant basé sur Google Gears.
• localstorage: stockage de brouillons HTML5.
• whatwg_db: stockage de base de données HTML5.
• globalstorage: stockage de brouillon HTML5 (ancienne spécification).
• c'est-à-dire: les comportements des données utilisateur d'Internet Explorer.
• cookie: stockage persistant basé sur les cookies.

Chacun de ceux-ci peut être désactivé, si, par exemple, vous ne souhaitez pas utiliser de cookies. Avec cette bibliothèque, vous bénéficierez d'une prise en charge native du stockage côté client dans IE 5.5+, Firefox 2.0+, Safari 3.1+ et Chrome; et prise en charge assistée par plugin si le navigateur dispose de Flash ou Gears. Si vous activez les cookies, cela fonctionnera dans tout (mais sera limité à 4 ko).

Polyfill de stockage local simple basé sur JS pur:

Démo: 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);
        }
    }
}​

avez-vous vu la page polyfill sur le wiki Modernizr?

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

recherchez la section de stockage Web sur cette page et vous verrez 10 solutions potentielles (en juillet 2011).

bonne chance! marque

Vous trouverez ci-dessous une version rangée de la réponse d'Aamir Afridi qui conserve tout son code encapsulé dans la portée locale.

J'ai supprimé les références qui créent une retvariable globale et également supprimé l'analyse des chaînes "true" et "false" stockées en valeurs booléennes dans la BrowserStorage.get()méthode, ce qui pourrait poser des problèmes si l'on essaie de stocker les chaînes "true" ou "faux".

Étant donné que l'API de stockage local ne prend en charge que les valeurs de chaîne, il est toujours possible de stocker / récupérer des données de variable JavaScript avec leurs types de données appropriés en codant lesdites données dans une chaîne JSON, qui peut ensuite être décodée à l'aide d'une bibliothèque de codage / décodage JSON telle que 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);
        }
    };
})();

Personnellement, je préfère amplify.js . Cela a très bien fonctionné pour moi dans le passé et je l'ai recommandé pour tous les besoins de stockage local.

prend en charge IE 5+, Firefox 2+, Safari 4+, Chrome, Opera 10.5+, iPhone 2+, Android 2+ et fournit une API cohérente pour gérer le stockage entre les navigateurs

store.js utilise userData et IE et localStorage sur d'autres navigateurs.

• Il n'essaye pas de faire quelque chose de trop complexe

• Pas de cookies, pas de flash, pas de jQuery nécessaire.

• Clean API.

• 5 ko compressé

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

La page MDN pour le stockage DOM propose plusieurs solutions de contournement qui utilisent des cookies.

Lawnchair semble aussi être une bonne alternative

une chaise de jardin est un peu comme un canapé, sauf plus petit et à l'extérieur. parfait pour les applications mobiles html5 qui ont besoin d'une solution de persistance légère, adaptative, simple et élégante.

• collections. une instance de fauteuil de jardin n'est en réalité qu'un tableau d'objets.
• persistance adaptative. le magasin sous-jacent est abstrait derrière une interface cohérente.
• comportement de collection enfichable. parfois nous avons besoin d'assistants de collecte mais pas toujours.

Il existe un stockage réel , qui utilise Gears comme solution de secours.