Solutions de secours HTML5 pour le stockage local
Je recherche des bibliothèques javascript et du code pouvant simuler localStorage sur des navigateurs sans support natif.
En gros, j'aimerais coder mon site en utilisant localStorage pour 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étecterait si window.localStorage existe et utilisez-le s'il le fait. S'il n'existe pas, cela créerait une sorte de méthode de secours du stockage local, en créant sa propre implémentation dans le window.localStorage espace de noms.
Jusqu'à présent, j'ai trouvé ces solutions:
- Simple sessionStorage implémentation.
- Une implémentation qui utilise des cookies (pas ravie de cette idée).
- Dojo's dojox.storage , mais c'est sa propre chose, 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 le stockage local standard HTML5. Peut-être que Google Gears a cette capacité aussi?
Veuillez partager les bibliothèques, ressources ou extraits de code associés que vous avez trouvés! Je serais particulièrement intéressé par les solutions basées sur javascript ou jquery, mais je suppose que c'est peu probable.
J'utilise PersistJS ( github repository ), qui gère le stockage côté client de manière transparente et transparente pour votre code. Vous utilisez une seule API et obtenez une assistance pour les moteurs suivants:
- flash: stockage persistant de Flash 8.
- engrenages: stockage persistant basé sur Google Gears.
- localstorage: stockage brouillon HTML5.
- whatwg_db: stockage de la base de données brouillon HTML5.
- globalstorage: stockage brouillon HTML5 (ancienne spécification).
- c'est-à-dire: comportements de données utilisateur d'Internet Explorer.
- cookie: stockage persistant basé sur les cookies.
Chacun de ceux-ci peut être désactivé, par exemple si vous ne souhaitez pas utiliser de cookies. Avec cette bibliothèque, vous obtiendrez un support de stockage natif côté client dans IE 5.5+, Firefox 2.0+, Safari 3.1+ et Chrome; et un support assisté par plugin si le navigateur dispose de Flash ou Engrenages: si vous activez les cookies, cela fonctionnera dans tout (mais sera limité à 4 Ko).
Polyfill simple localStorage à base de JS:
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
cherchez la section webstorage sur cette page et vous verrez 10 solutions potentielles (à partir de juillet 2011).
bonne chance! marque
Vous trouverez ci-dessous une version corrigée de la réponse d’Aamir Afridi qui garde tout son code encapsulé dans la portée locale.
J'ai supprimé les références qui créent une variable globale ret ainsi que l'analyse syntaxique des chaînes "true" et "false" stockées en valeurs booléennes dans la méthode BrowserStorage.get(), ce qui pourrait poser des problèmes si on essaie en fait de stocker les chaînes "true" ou "false".
Comme 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 variables JavaScript ainsi que leurs types de données appropriés en les codant 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 par le passé et je l’avais recommandé pour tous les besoins de stockage locaux.
prend en charge IE 5+, Firefox 2+, Safari 4+, Chrome, Opera 10.5+, iPhone 2+, = 2+, Android = 2+ et fournit une API cohérente pour gérer le stockage dans plusieurs navigateurs
store.js utilise userData et IE et localStorage sur d'autres navigateurs.
Il n'essaie pas de faire quelque chose de trop complexe
Pas de cookies, pas de flash, pas de jQuery nécessaire.
API propre.
5 kb compressé
La page MDN pour le stockage DOM donne plusieurs solutions de contournement utilisant des cookies.
Lawnchair semble être une bonne alternative aussi
une chaise de jardin est en quelque sorte comme un canapé, sauf plus petite et à l'extérieur. parfait pour les applications mobiles html5 nécessitant une solution de persistance légère, adaptative, simple et élégante.
- collections. une instance de lawnchair n'est en réalité qu'un tableau d'objets.
- persistance adaptative. le magasin sous-jacent est résumé derrière une interface cohérente.
- comportement de collecte enfichable. nous avons parfois besoin d’aides à la collecte, mais pas toujours.
Il existe realstorage , qui utilise Gears comme solution de secours.