javascript - localstorage - ¿Cuándo caducan los elementos en el almacenamiento local HTML5?

uso de localstorage javascript

Question

¿Durante cuánto tiempo están disponibles los datos almacenados en localStorage (como parte del Almacenamiento DOM en HTML5)? ¿Puedo establecer un tiempo de caducidad para los datos que puse en localStorage?

Answer 1

Aquí es muy recomendable utilizar sessionStorage.

• es igual que localStorage pero se destruye cuando se destruye una sesión / se cierra el navegador
• sessionStorage también es útil para reducir el tráfico de red contra las cookies

para el uso de valor establecido

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

para obtener valor de uso

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

haga clic aquí para ver la api

todas las formas para el conjunto son

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

todas las formas de conseguir son

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

Answer 2

Brynner Ferreira, ha traído un buen punto: almacenar una clave de hermano donde reside la información de vencimiento. De esta manera, si tiene una gran cantidad de claves, o si sus valores son objetos Json grandes , no necesita analizarlos para acceder a la marca de tiempo.

Aquí sigue una versión mejorada:

 /* removeStorage: removes a key from localStorage and its sibling expiracy key
params:
key <string> : localStorage key to remove
returns:
<boolean> : 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 <string> : localStorage key
returns:
<string> : 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 <string> : localStorage key
value <string> : localStorage value
expires <number> : number of seconds from now to expire the key
returns:
<boolean> : 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;
}

Answer 3

Del borrador del W3C:

Los agentes de usuario deben caducar los datos de las áreas de almacenamiento local solo por razones de seguridad o cuando el usuario lo solicite. Los agentes de usuario siempre deben evitar eliminar datos mientras se ejecuta un script que podría acceder a esos datos.

Usted querrá hacer sus actualizaciones en su horario usando setItem (clave, valor); que agregará o actualizará la clave dada con los nuevos datos.

Answer 4

El ciclo de vida es controlado por la aplicación / usuario.

De la standard :

Los agentes de usuario deben caducar los datos de las áreas de almacenamiento local solo por razones de seguridad o cuando el usuario lo solicite. Los agentes de usuario siempre deben evitar eliminar datos mientras se ejecuta un script que podría acceder a esos datos.

Answer 5

En mi opinión, el enfoque de @ sebarmeli es el mejor, pero si solo desea que los datos persistan durante la vida de una sesión, entonces sessionStorage es probablemente una mejor opción:

Este es un objeto global (sessionStorage) que mantiene un área de almacenamiento que está disponible durante la sesión de la página. Una sesión de página dura todo el tiempo que el navegador está abierto y sobrevive a las recargas y restauraciones de la página. Al abrir una página en una nueva pestaña o ventana, se iniciará una nueva sesión.

MDN: sessionStorage

Answer 6

Mientras que el almacenamiento local no proporciona un mecanismo de expiración, las cookies sí lo hacen. El simple emparejamiento de una clave de almacenamiento local con una cookie proporciona una manera fácil de garantizar que el almacenamiento local pueda actualizarse con los mismos parámetros de caducidad que una cookie.

Ejemplo en 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 ejemplo establece una cookie con el parámetro predeterminado que caduca cuando se cierra el navegador. Por lo tanto, cuando el navegador se cierra y se vuelve a abrir, el almacén de datos local de your_data se actualiza con una llamada del servidor.

Tenga en cuenta que esto no es exactamente lo mismo que eliminar el almacén de datos local, sino que se actualiza el almacén de datos local cada vez que caduca la cookie. Sin embargo, si su objetivo principal es poder almacenar más de 4K en el lado del cliente (la limitación para el tamaño de las cookies), esta combinación de cookies y almacenamiento local lo ayudará a lograr un mayor tamaño de almacenamiento utilizando los mismos parámetros de vencimiento que una cookie. .

Answer 7

No es posible especificar la caducidad. Todo depende del usuario.

https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage

Por supuesto, es posible que algo que su aplicación almacena en el cliente no esté allí más tarde. El usuario puede deshacerse explícitamente del almacenamiento local, o el navegador puede tener problemas de espacio. Es bueno programar defensivamente. En general, sin embargo, las cosas permanecen "para siempre" basadas en alguna definición práctica de esa palabra.

Editar : obviamente, tu propia aplicación puede eliminar cosas de forma activa si decide que es demasiado antigua. Es decir, puede incluir explícitamente algún tipo de marca de tiempo en lo que ha guardado, y luego usarlo más tarde para decidir si la información se debe vaciar o no.

Answer 8

Para el beneficio de los buscadores:

Al igual que Fernando, no quería agregar una carga de json cuando los valores almacenados eran simples. Solo necesitaba realizar un seguimiento de algunas interacciones de la interfaz de usuario y mantener los datos relevantes (por ejemplo, cómo un usuario usaba un sitio de comercio electrónico antes de retirarse).

Esto no cumplirá con los criterios de todos, pero esperamos que sea un inicio rápido para copiar y pegar para alguien y guardar la adición de otra lib.

NOTA: Esto no sería bueno si necesita recuperar los elementos 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]);
}
}

Answer 9

Puedes usar lscache . Maneja esto automáticamente, incluidas las instancias en las que el tamaño de almacenamiento excede el límite. Si eso sucede, comienza la eliminación de los elementos más cercanos a su caducidad especificada.

Desde el readme :

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

Esta es la única diferencia real entre los métodos de almacenamiento regulares. Consigue, quita, etc. funciona igual.

Si no necesita tanta funcionalidad, simplemente puede almacenar una marca de tiempo con el valor (a través de JSON) y verificar su caducidad.

Cabe destacar que hay una buena razón por la cual el almacenamiento local queda en manos del usuario. Pero, cosas como lscache son útiles cuando necesita almacenar datos extremadamente temporales.

Answer 10

Si alguien sigue buscando una solución rápida y no quiere dependencias como jquery, etc., escribí una mini biblioteca que agrega la caducidad al almacenamiento local / de sesión / personalizado, puede encontrarla con la fuente aquí:

https://github.com/RonenNess/ExpiredStorage

Answer 11

Si alguien utiliza el complemento jStorage de jQuery, se puede agregar la caducidad con la función setTTL si el complemento jStorage

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

Answer 12

Solución utilizando anguloso y forraje local:

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
}
})
}
}
})

Answer 13

Yo sugeriría almacenar la marca de tiempo en el objeto que almacena en el localStorage

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

Puede analizar el objeto, obtener la marca de tiempo y comparar con la Fecha actual y, si es necesario, actualizar el valor del objeto.

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

Answer 14

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