javascript - ¿Cuándo expiran los elementos en el almacenamiento local de HTML5?

¿Por cuánto tiempo están disponibles los datos almacenados en localStorage (como parte del DOM Storage en HTML5)? ¿Puedo establecer un tiempo de expiración para los datos que pongo en el almacenamiento local?

Respuesta #1

Sugeriría almacenar la marca de tiempo en el objeto que guardas en el localStorage

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

Puedes analizar el objeto, obtener la marca de tiempo y compararla 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

Alternativamente, podrías usar un contenedor liviano como localstorage-slim.js que maneja esto por ti.

Respuesta #2

No es posible especificar la expiración. Depende completamente 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 eliminar explícitamente el almacenamiento local, o el navegador puede tener consideraciones de espacio. Es bueno programar de manera preventiva. Sin embargo, generalmente las cosas permanecen "para siempre" según alguna definición práctica de esa palabra.

editar — obviamente, tu propia aplicación puede eliminar activamente cosas si decide que son demasiado antiguas. Es decir, puedes incluir explícitamente algún tipo de marca de tiempo en lo que has guardado, y luego usar eso más tarde para decidir si la información debe ser eliminada.

Respuesta #3

Brynner Ferreira ha señalado un buen punto: almacenar una clave hermana donde reside la información de expiración. De esta manera, si tienes una gran cantidad de claves, o si tus valores son grandes objetos Json, no necesitas 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;
}

Respuesta #4

Puedes usar lscache. Lo maneja automáticamente por ti, incluyendo los casos en los que el tamaño del almacenamiento excede el límite. Si eso sucede, comienza a podar los elementos que están más cerca de su fecha de expiración especificada.

Del 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 normales. Obtener, eliminar, etc., funcionan igual.

Si no necesitas tanta funcionalidad, puedes simplemente almacenar una marca de tiempo con el valor (a través de JSON) y verificar si ha expirado.

Es notable, hay una buena razón por la que el almacenamiento local se deja al usuario. Pero, cosas como lscache sí resultan útiles cuando necesitas almacenar datos extremadamente temporales.

Respuesta #5

Aquí se recomienda encarecidamente usar sessionStorage

es lo mismo que localStorage pero se destruye cuando la sesión se destruye/se cierra el navegador
también localStorage puede compartirse entre pestañas mientras que sessionStorage solo se puede usar en la pestaña actual, pero el valor no cambia al actualizar la página o al cambiar de página
sessionStorage también es útil para reducir el tráfico de red frente a las cookies

para usar el valor establecido

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

para obtener el valor utilizar

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

haga clic aquí para ver la API

todas las formas para establecer son

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

todas las formas de obtener son

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

Respuesta #6

Aunque el almacenamiento local no proporciona un mecanismo de expiración, las cookies sí lo hacen. Simplemente emparejar una clave de almacenamiento local con una cookie proporciona una manera fácil de asegurar que el almacenamiento local se pueda actualizar con los mismos parámetros de expiración 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 para que expire cuando se cierre el navegador. Por lo tanto, cuando se cierra y se vuelve a abrir el navegador, el almacén de datos local para your_data se actualiza mediante una llamada del lado del servidor.

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

Respuesta #7

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

Del estándar:

Los agentes de usuario deben eliminar 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 esté ejecutando un script que pueda acceder a esos datos.

Respuesta #8

Del borrador del W3C: