Soluções de fallback de armazenamento local em HTML5

Eu estou procurando por bibliotecas de javascript e código que podem simular localStorage em navegadores que não têm suporte nativo.

Basicamente, eu gostaria de codificar meu site usando o localStorage para armazenar dados e saber que ele ainda funcionará em navegadores que não o suportam nativamente. Isso significaria que uma biblioteca detectaria se window.localStorage existia e a usaria se isso acontecesse. Se ele não existir, ele criaria algum tipo de método de fallback de armazenamento local, criando sua própria implementação no namespace window.localStorage .

Até agora, encontrei estas soluções:

  1. Implementação simples de sessionStorage .
  2. Uma implementação que usa cookies (não está entusiasmada com essa ideia).
  3. Dojox.storage do Dojo, mas é a sua própria coisa, não é realmente um substituto.

Entendo que o Flash e o Silverlight também podem ser usados ​​para armazenamento local, mas não encontrei nada sobre como usá-los como substituto para o localStorage HTML5 padrão. Talvez o Google Gears também tenha esse recurso?

Por favor, compartilhe quaisquer bibliotecas, resources ou trechos de código relacionados que você encontrou! Eu estaria especialmente interessado em puro javascript ou soluções baseadas em jquery, mas estou adivinhando que é improvável.

Eu uso o PersistJS ( repository github ), que lida com o armazenamento do lado do cliente de forma transparente e transparente para o seu código. Você usa uma única API e obtém suporte para os seguintes back-ends:

  • flash: armazenamento persistente do Flash 8.
  • gears: armazenamento persistente baseado no Google Gears.
  • localstorage: armazenamento de rascunho em HTML5.
  • whatwg_db: armazenamento de database de rascunho em HTML5.
  • globalstorage: armazenamento de rascunho em HTML5 (especificação antiga).
  • ou seja: comportamentos de dados do usuário do Internet Explorer.
  • cookie: armazenamento persistente baseado em cookie.

Qualquer um deles pode ser desativado – se, por exemplo, você não quiser usar cookies. Com essa biblioteca, você obterá suporte nativo de armazenamento no lado do cliente no IE 5.5+, no Firefox 2.0+, no Safari 3.1+ e no Chrome; e suporte assistido por plug-in, se o navegador tiver Flash ou Gears. Se você ativar cookies, funcionará em tudo (mas será limitado a 4 kB).

Polyfill simples localStorage baseado em JS:

Demonstração: 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); } } }​ 

você viu a página de polyfill no wiki Modernizr?

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

procure a seção de armazenamento na Web nessa página e você verá 10 soluções potenciais (em julho de 2011).

boa sorte! Marca

Eu pessoalmente prefiro amplify.js . Ele funcionou muito bem para mim no passado e eu o recomendei para todas as necessidades de armazenamento local.

Suporta o IE 5+, o Firefox 2+, o Safari 4+, o Chrome, o Opera 10.5+, o iPhone 2+, o Android 2+ e fornece uma API consistente para lidar com o armazenamento em vários navegadores

Abaixo está uma versão ordenada da resposta do Aamir Afridi que mantém todo o seu código encapsulado dentro do escopo local.

Eu removi referências que criam uma variável global ret e também removi a análise de strings armazenadas “true” e “false” em valores booleanos dentro do método BrowserStorage.get() , o que poderia causar problemas se alguém estivesse tentando de fato armazenar as strings “true” ou “false”.

Como a API de armazenamento local suporta apenas valores de string, ainda é possível armazenar / recuperar dados de variables ​​JavaScript junto com seus tipos de dados apropriados codificando os dados em uma string JSON, que pode ser decodificada usando uma biblioteca de codificação / decodificação 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); } }; })(); 

O store.js usa userData e IE e localStorage em outros navegadores.

  • Não tenta fazer nada muito complexo

  • Sem cookies, sem flash, sem necessidade de jQuery.

  • API limpa.

  • 5 kb comprimido

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

A página do MDN para armazenamento DOM fornece várias soluções alternativas que usam cookies.

Lawnchair parece ser uma boa alternativa também

uma cadeira de jardim é como um sofá, exceto menor e fora. perfeito para aplicativos móveis html5 que precisam de uma solução de persistência leve, adaptável, simples e elegante.

  • collections. uma instância de cadeira de gramado é realmente apenas uma matriz de objects.
  • persistência adaptativa. a loja subjacente é abstraída por trás de uma interface consistente.
  • comportamento de coleta plugável. às vezes precisamos de ajudantes de coleta, mas nem sempre.

Há realstorage , que usa o Gears como fallback.

Intereting Posts