Quando os itens no armazenamento local em HTML5 expiram?

Por quanto tempo os dados armazenados no localStorage (como parte do DOM Storage em HTML5) estão disponíveis? Posso definir uma hora de expiração para os dados que eu coloquei no localStorage?

De acordo com John Resig, não é possível especificar a expiração. É completamente com o usuário.

http://ejohn.org/blog/dom-storage/

editar – obviamente, o seu próprio aplicativo pode remover ativamente o material se ele decidir que é muito antigo. Ou seja, você pode include explicitamente algum tipo de registro de data e hora no que foi salvo e usá-lo posteriormente para decidir se as informações devem ou não ser liberadas.

Sugiro para armazenar o timestamp no object que você armazena no localStorage

var object = {value: "value", timestamp: new Date().getTime()} localStorage.setItem("key", JSON.stringify(object)); 

Você pode analisar o object, obter o registro de data e hora e comparar com a Data atual e, se necessário, atualizar o valor do object.

 var object = JSON.parse(localStorage.getItem("key")), dateString = object.timestamp, now = new Date().getTime().toString(); compareTime(dateString, now); //to implement 

Você pode usar o lscache . Ele lida com isso automaticamente, incluindo instâncias em que o tamanho do armazenamento excede o limite. Se isso acontecer, ele começará a remover os itens mais próximos da expiração especificada.

Do readme :

 lscache.set Stores the value in localStorage. Expires after specified number of minutes. Arguments key (string) value (Object|string) time (number: optional) 

Essa é a única diferença real entre os methods de armazenamento regulares. Obtenha, remova, etc. trabalhe da mesma forma.

Se você não precisa de muita funcionalidade, pode simplesmente armazenar um registro de data e hora com o valor (via JSON) e verificar sua validade.

Digno de nota, há uma boa razão pela qual o armazenamento local é deixado para o usuário. Porém, coisas como o lscache são úteis quando você precisa armazenar dados extremamente temporários.

Brynner Ferreira, trouxe um bom ponto: armazenar uma chave de irmão, onde reside a informação de validade. Dessa forma, se você tiver uma grande quantidade de chaves ou se seus valores forem objects grandes do Json , não será necessário analisá-los para acessar o registro de data e hora.

segue aqui uma versão melhorada:

  /* removeStorage: removes a key from localStorage and its sibling expiracy key params: key  : localStorage key to remove returns:  : telling if operation succeeded */ function removeStorage(name) { try { localStorage.removeItem(name); localStorage.removeItem(name + '_expiresIn'); } catch(e) { console.log('removeStorage: Error removing key ['+ key + '] from localStorage: ' + JSON.stringify(e) ); return false; } return true; } /* getStorage: retrieves a key from localStorage previously set with setStorage(). params: key  : localStorage key returns:  : value of localStorage key null : in case of expired key or failure */ function getStorage(key) { var now = Date.now(); //epoch time, lets deal only with integer // set expiration for storage var expiresIn = localStorage.getItem(key+'_expiresIn'); if (expiresIn===undefined || expiresIn===null) { expiresIn = 0; } if (expiresIn < now) {// Expired removeStorage(key); return null; } else { try { var value = localStorage.getItem(key); return value; } catch(e) { console.log('getStorage: Error reading key ['+ key + '] from localStorage: ' + JSON.stringify(e) ); return null; } } } /* setStorage: writes a key into localStorage setting a expire time params: key  : localStorage key value  : localStorage value expires  : number of seconds from now to expire the key returns:  : telling if operation succeeded */ function setStorage(key, value, expires) { if (expires===undefined || expires===null) { expires = (24*60*60); // default: seconds for 1 day } else { expires = Math.abs(expires); //make sure it's positive } var now = Date.now(); //millisecs since epoch time, lets deal only with integer var schedule = now + expires*1000; try { localStorage.setItem(key, value); localStorage.setItem(key + '_expiresIn', schedule); } catch(e) { console.log('setStorage: Error setting key ['+ key + '] in localStorage: ' + JSON.stringify(e) ); return false; } return true; } 

Enquanto o armazenamento local não fornece um mecanismo de expiração, os cookies fazem isso. O simples emparelhamento de uma chave de armazenamento local com um cookie fornece uma maneira fácil de garantir que o armazenamento local possa ser atualizado com os mesmos parâmetros de validade de um cookie.

Exemplo no jQuery:

 if (!$.cookie('your_key') || !localStorage.getItem('your_key')) { //get your_data from server, then... localStorage.setItem('your_key', 'your_data' ); $.cookie('your_key', 1); } else { var your_data = localStorage.getItem('your_key'); } // do stuff with your_data 

Este exemplo define um cookie com o parâmetro padrão para expirar quando o navegador é fechado. Assim, quando o navegador é fechado e reaberto, o armazenamento de dados local para your_data é atualizado por uma chamada do lado do servidor.

Observe que isso não é exatamente o mesmo que remover o repository de dados local; em vez disso, ele atualiza o repository de dados local sempre que o cookie expira. No entanto, se seu objective principal for armazenar mais de 4K do lado do cliente (a limitação para o tamanho do cookie), esse emparelhamento de cookie e armazenamento local ajudará você a obter um tamanho de armazenamento maior usando os mesmos parâmetros de expiração de um cookie .

O ciclo de vida é controlado pelo aplicativo / usuário.

Do padrão :

Os agentes do usuário devem expirar os dados das áreas de armazenamento local apenas por motivos de segurança ou quando solicitado pelo usuário. Os agentes do usuário devem sempre evitar a exclusão de dados enquanto um script que possa acessar esses dados estiver em execução.

Aqui altamente recomendado para usar sessionStorage

  • é o mesmo que localStorage mas destrói quando a session é destruída / fecha o navegador
  • sessionStorage também é útil para reduzir o tráfego de rede contra cookies

para uso de valor definido

 sessionStorage.setItem("key","my value"); 

para obter valor de uso

 var value = sessionStorage.getItem("key"); 

clique aqui para ver api

todas as formas de conjunto são

  sessionStorage.key = "my val"; sessionStorage["key"] = "my val"; sessionStorage.setItem("key","my value"); 

todas as maneiras de obter são

  var value = sessionStorage.key; var value = sessionStorage["key"]; var value = sessionStorage.getItem("key"); 

Do rascunho do W3C:

Os agentes do usuário devem expirar os dados das áreas de armazenamento local apenas por motivos de segurança ou quando solicitado pelo usuário. Os agentes do usuário devem sempre evitar a exclusão de dados enquanto um script que possa acessar esses dados estiver em execução.

Você vai querer fazer suas atualizações em sua programação usando setItem (key, value); isso adicionará ou atualizará a chave dada com os novos dados.

 // Functions function removeHtmlStorage(name) { localStorage.removeItem(name); localStorage.removeItem(name+'_time'); } function setHtmlStorage(name, value, expires) { if (expires==undefined || expires=='null') { var expires = 3600; } // default: 1h var date = new Date(); var schedule = Math.round((date.setSeconds(date.getSeconds()+expires))/1000); localStorage.setItem(name, value); localStorage.setItem(name+'_time', schedule); } function statusHtmlStorage(name) { var date = new Date(); var current = Math.round(+date/1000); // Get Schedule var stored_time = localStorage.getItem(name+'_time'); if (stored_time==undefined || stored_time=='null') { var stored_time = 0; } // Expired if (stored_time < current) { // Remove removeHtmlStorage(name); return 0; } else { return 1; } } // Status var cache_status = statusHtmlStorage('cache_name'); // Has Data if (cache_status == 1) { // Get Cache var data = localStorage.getItem('cache_name'); alert(data); // Expired or Empty Cache } else { // Get Data var data = 'Pay in cash :)'; alert(data); // Set Cache (30 seconds) if (cache) { setHtmlStorage('cache_name', data, 30); } } 

Se alguém usar o jStorage Plugin do jQuery, ele pode ser adicionado com a function setTTL se o plugin jStorage

 $.jStorage.set('myLocalVar', "some value"); $.jStorage.setTTL("myLocalVar", 24*60*60*1000); // 24 Hr. 

Solução alternativa usando angular e localforage:

 angular.module('app').service('cacheService', function() { return { set: function(key, value, expireTimeInSeconds) { return localforage.setItem(key, { data: value, timestamp: new Date().getTime(), expireTimeInMilliseconds: expireTimeInSeconds * 1000 }) }, get: function(key) { return localforage.getItem(key).then(function(item) { if(!item || new Date().getTime() > (item.timestamp + item.expireTimeInMilliseconds)) { return null } else { return item.data } }) } } }) 

A abordagem do @sebarmeli é a melhor na minha opinião, mas se você quiser que os dados persistam durante a vida de uma session, então sessionStorage é provavelmente a melhor opção:

Este é um object global (sessionStorage) que mantém uma área de armazenamento disponível para a duração da session da página. Uma session de página dura enquanto o navegador estiver aberto e sobrevive com recarregamentos e restaurações da página. Abrir uma página em uma nova aba ou janela fará com que uma nova session seja iniciada.

MDN: sessionStorage

Se alguém ainda está procurando uma solução rápida e não quer dependencies como jquery etc eu escrevi um mini lib que adiciona expiração ao armazenamento local / session / customizado, você pode encontrá-lo com a fonte aqui:

https://github.com/RonenNess/ExpiredStorage

Para o benefício dos pesquisadores:

Como Fernando, eu não queria adicionar uma carga de json quando os valores armazenados eram simples. Eu só precisava acompanhar alguma interação da interface do usuário e manter os dados relevantes (por exemplo, como um usuário usava um site de comércio eletrônico antes de fazer o check-out).

Isso não atenderá a todos os critérios, mas esperamos que seja uma cópia rápida e cole o iniciador para alguém e salve a adição de outro lib.

NOTA: Isso não seria bom se você precisar recuperar os itens individualmente.

 // Addition if(window.localStorage){ localStorage.setItem('myapp-' + new Date().getTime(), 'my value'); } // Removal of all expired items if(window.localStorage){ // two mins - (1000 * 60 * 20) would be 20 mins var expiryTime = new Date().getTime() - (1000 * 60 * 2); var deleteRows = []; for(var i=0; i < localStorage.length; i++){ var key = localStorage.key(i); var partsArray = key.split('-'); // The last value will be a timestamp var lastRow = partsArray[partsArray.length - 1]; if(lastRow && parseInt(lastRow) < expiryTime){ deleteRows.push(key); } } // delete old data for(var j=0; j < deleteRows.length; j++){ localStorage.removeItem(deleteRows[j]); } }