Soluzioni di fallback di archiviazione locale HTML5

Sto cercando librerie e codici javascript in grado di simulare localStorage su browser che non dispongono di supporto nativo.

Fondamentalmente, mi piacerebbe codificare il mio sito utilizzando localStorage per memorizzare i dati e sapere che funzionerà ancora su browser che non lo supportano in modo nativo. Ciò significherebbe che una libreria potrebbe rilevare se window.localStorage esiste e usarlo se lo fa. Se non esiste, creerebbe una sorta di metodo di riserva dello storage locale, creando la propria implementazione nello spazio window.localStorage nomi window.localStorage .

Finora, ho trovato queste soluzioni:

  1. Semplice implementazione sessionStorage .
  2. Un’implementazione che utilizza i cookie (non entusiasti di questa idea).
  3. Dojo’s dojox.storage , ma è una cosa tutta sua, non una vera e propria ripiego.

Comprendo che Flash e Silverlight possono essere utilizzati anche per l’archiviazione locale, ma non abbiamo trovato nulla sul loro utilizzo come fallback per lo standard HTML5 localStorage. Forse Google Gears ha anche questa capacità?

Si prega di condividere eventuali librerie, risorse o frammenti di codice relativi che hai trovato! Sarei particolarmente interessato alle soluzioni javascript o jquery, ma suppongo che sia improbabile.

Uso PersistJS ( repository github ), che gestisce l’archiviazione lato client in modo trasparente e trasparente per il codice. Si utilizza una singola API e si ottiene il supporto per i seguenti back-end:

  • flash: memoria persistente di Flash 8.
  • ingranaggi: archiviazione persistente basata su Google Gears.
  • localstorage: archiviazione di bozze HTML5.
  • whatwg_db: archiviazione del database draft HTML5.
  • globalstorage: archiviazione di bozze HTML5 (vecchia specifica).
  • cioè: comportamenti utente di Internet Explorer.
  • cookie: archiviazione persistente basata su cookie.

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

PolySill di localStorage basato su Pure JS:

Demo: http://jsfiddle.net/aamir/S4X35/

HTML:

 set key: foo, with value: bar
get key: foo
delete key: foo

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 di polyfill sul wiki di Modernizr?

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

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

in bocca al lupo! marchio

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 il cross-browser di archiviazione

Di seguito è riportata una versione riordinata della risposta di Aamir Afridi che mantiene tutto il codice incapsulato nell’ambito locale.

Ho rimosso riferimenti che creano una variabile ret globale e anche rimosso l’analisi delle stringhe “true” e “false” memorizzate in valori booleani all’interno del metodo BrowserStorage.get() , che potrebbe causare problemi se si sta tentando di archiviare effettivamente le stringhe “vero” o “falso”.

Poiché l’API di archiviazione locale supporta solo i valori stringa, è ansible memorizzare / recuperare i dati variabili JavaScript insieme ai relativi tipi di dati appropriati codificando tali dati in una stringa JSON, che può 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); } }; })(); 

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

  • Non tenta di fare qualcosa 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 diversi metodi che utilizzano i cookie.

Anche Lawnchair sembra essere una buona alternativa

una sedia da giardino è un po ‘come un divano, tranne quelli più piccoli ed esterni. perfetto per le app html5 che necessitano di una soluzione di persistenza leggera, adattabile, semplice ed elegante.

  • collezioni. un’istanza di sedia a sdraio è in realtà solo una serie di oggetti.
  • persistenza adtriggers. il negozio sottostante è astratto dietro un’interfaccia coerente.
  • comportamento di raccolta collegabile. a volte abbiamo bisogno di aiutanti di raccolta ma non sempre.

C’è un realstorage , che usa Gears come una riserva.