Quando scadono gli articoli nello storage locale HTML5?

Per quanto tempo sono disponibili i dati memorizzati in localStorage (come parte di DOM Storage in HTML5)? Posso impostare un tempo di scadenza per i dati che ho inserito in localStorage?

Secondo John Resig, non è ansible specificare la scadenza. Dipende completamente dall’utente.

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

modifica – ovviamente, la tua applicazione può rimuovere triggersmente le cose se decide che è troppo vecchia. Cioè, puoi includere esplicitamente una sorta di timestamp in ciò che hai salvato, e poi usarlo in seguito per decidere se le informazioni debbano essere svuotate o meno.

Suggerirei di memorizzare il timestamp nell’object che si memorizza nel localStorage

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

È ansible analizzare l’object, ottenere il timestamp e confrontarlo con la data corrente e, se necessario, aggiornare il valore dell’object.

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

Puoi usare lscache . Lo gestisce automaticamente, incluse le istanze in cui le dimensioni dello spazio di archiviazione superano il limite. Se ciò accade, inizia ad eliminare gli elementi che sono più vicini alla loro scadenza specificata.

Dal readme :

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

Questa è l’unica vera differenza tra i normali metodi di archiviazione. Ottenere, rimuovere, ecc funzionano allo stesso modo.

Se non hai bisogno di tanta funzionalità, puoi semplicemente memorizzare un timestamp con il valore (tramite JSON) e controllarlo per la scadenza.

Degno di nota, c’è una buona ragione per cui l’archiviazione locale è lasciata all’utente. Ma cose come lscache sono utili quando è necessario memorizzare dati estremamente temporanei.

Brynner Ferreira, ha portato un buon punto: la memorizzazione di una chiave di pari livello in cui risiedono le informazioni sulla scadenza. In questo modo, se hai una grande quantità di chiavi, o se i tuoi valori sono oggetti JSON di grandi dimensioni , non è necessario analizzarli per accedere al timestamp.

qui segue una versione migliorata:

  /* 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; } 

Mentre i depositi locali non forniscono un meccanismo di scadenza, i cookie lo fanno. L’abbinamento semplice di una chiave di archiviazione locale con un cookie offre un modo semplice per garantire che l’archiviazione locale possa essere aggiornata con gli stessi parametri di scadenza di un cookie.

Esempio in 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 

Questo esempio imposta un cookie con il parametro predefinito che scade quando il browser viene chiuso. Pertanto, quando il browser viene chiuso e riaperto, l’archivio dati locale per your_data viene aggiornato da una chiamata sul lato server.

Si noti che questo non è esattamente lo stesso della rimozione dell’archivio dati locale, ma sta invece aggiornando l’archivio dati locale ogni volta che il cookie scade. Tuttavia, se il tuo objective principale è quello di poter archiviare più di 4K lato client (la limitazione per le dimensioni dei cookie), questo abbinamento di cookie e archiviazione locale ti aiuterà a realizzare una dimensione di archiviazione più grande utilizzando gli stessi parametri di scadenza di un cookie .

Il ciclo di vita è controllato dall’applicazione / utente.

Dallo standard :

I programmi utente dovrebbero scadere i dati dalle aree di archiviazione locale solo per motivi di sicurezza o quando richiesto dall’utente. I programmi utente dovrebbero sempre evitare di cancellare i dati mentre è in esecuzione uno script che potrebbe accedere a quei dati.

Qui altamente raccomandato utilizzare sessionStorage

  • è lo stesso di localStorage ma distrugge quando la sessione viene distrutta / il browser si chiude
  • sessionStorage è anche utile per ridurre il traffico di rete contro i cookie

per l’utilizzo del valore impostato

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

per ottenere l’uso del valore

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

clicca qui per vedere api

tutti i modi per impostare sono

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

tutti i modi per ottenere sono

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

Dalla bozza del W3C:

I programmi utente dovrebbero scadere i dati dalle aree di archiviazione locale solo per motivi di sicurezza o quando richiesto dall’utente. I programmi utente dovrebbero sempre evitare di cancellare i dati mentre è in esecuzione uno script che potrebbe accedere a quei dati.

Dovrai fare i tuoi aggiornamenti sulla tua pianificazione usando setItem (chiave, valore); che aggiungerà o aggiornerà la chiave data con i nuovi dati.

 // 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 qualcuno usa jStorage Plugin di jQuery può essere aggiunto alla scadenza con la funzione setTTL se jStorage plugin

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

Soluzione alternativa con 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 } }) } } }) 

L’approccio di @ sebarmeli è il migliore a mio avviso, ma se vuoi che i dati sessionStorage mantenuti per tutta la durata di una sessione, sessionStorage è probabilmente un’opzione migliore:

Questo è un object globale (sessionStorage) che mantiene un’area di memoria disponibile per la durata della sessione di pagina. Una sessione di pagina dura fino a quando il browser è aperto e sopravvive alla pagina ricaricando e ripristinando. L’apertura di una pagina in una nuova scheda o finestra causerà l’avvio di una nuova sessione.

MDN: sessionStorage

Se qualcuno ancora sta cercando una soluzione rapida e non vuole dipendenze come jquery ecc. Ho scritto una mini lib che aggiunge la scadenza all’archiviazione locale / di sessione / personalizzata, puoi trovarla qui con l’origine:

https://github.com/RonenNess/ExpiredStorage

Per il beneficio degli utenti:

Come Fernando, non volevo aggiungere un carico di json quando i valori memorizzati erano semplici. Avevo solo bisogno di tenere traccia dell’interazione dell’interfaccia utente e di mantenere i dati rilevanti (ad esempio, come un utente ha utilizzato un sito di e-commerce prima del check-out).

Questo non soddisferà i criteri di tutti, ma si spera che sia una copia rapida + incolla l’antipasto per qualcuno e salvi l’aggiunta di un’altra lib.

NOTA: ciò non sarebbe positivo se è necessario recuperare gli articoli singolarmente.

 // 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]); } }