Question

Pour combien de temps les données stockées dans localStorage (dans le cadre du stockage DOM en HTML5) disponible? Puis-je définir une heure d'expiration pour les données que je mets en localStorage?

Était-ce utile?

La solution

Il est impossible de préciser l'expiration. Il est tout à fait à l'utilisateur.

https://developer.mozilla.org/en- US / docs / Web / API / fenêtre / localStorage

Bien sûr, il est possible que quelque chose de vos magasins d'applications sur le client ne peut pas être là plus tard. L'utilisateur peut explicitement se débarrasser de stockage local, ou le navigateur peut fonctionner dans des considérations d'espace. Il est bon de programmer la défensive. En général, cependant les choses restent « pour toujours » basée sur une définition pratique de ce mot.

modifier - De toute évidence, votre application peut supprimer activement des choses si elle décide qu'il est trop vieux. Autrement dit, vous pouvez inclure explicitement une sorte d'horodatage dans ce que vous avez enregistré, puis utiliser plus tard pour décider si oui ou non doit être rincée informations.

Autres conseils

Je suggère à l'horodatage du magasin dans la objet que vous amassez dans le localStorage

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

Vous pouvez analyser l'objet, obtenir l'horodatage et comparer avec la date actuelle et, si nécessaire, mettre à jour la valeur de l'objet.

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

compareTime(dateString, now); //to implement

Vous pouvez utiliser lscache. Il gère automatiquement pour vous, y compris les cas où la taille de stockage dépasse la limite. Si cela se produit, il commence des éléments de taille qui sont les plus proches de leur expiration spécifiée.

De l'readme:

lscache.set

Stores the value in localStorage. Expires after specified number of minutes.

Arguments
key (string)
value (Object|string)
time (number: optional)

Ceci est la seule vraie différence entre les méthodes de stockage régulières. Get, supprimer, etc. fonctionnent de la même.

Si vous n'avez pas besoin de cette fonctionnalité beaucoup, vous pouvez simplement stocker un horodatage avec la valeur (via JSON) et le vérifier pour l'expiration.

Il convient de noter, il y a une bonne raison pour laquelle le stockage local est laissé à l'utilisateur. Mais, les choses comme lscache ne sont utiles lorsque vous avez besoin de stocker des données extrêmement temporaires.

Brynner Ferreira, a apporté un bon point: le stockage d'une clé de frères et soeurs où les informations d'expiration réside. De cette façon, si vous avez une grande quantité de clés, ou si vos valeurs sont grandes objets JSON , vous n'avez pas besoin de les analyser pour accéder à l'horodatage.

suit ici une version améliorée:

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

Alors que le stockage local ne fournit pas un mécanisme d'expiration, les cookies font. jumelant simplement une clé de stockage local avec un cookie fournit un moyen facile de faire en sorte que le stockage local peut être mis à jour avec les mêmes paramètres d'expiration comme un cookie.

Exemple de 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

Cet exemple définit un cookie avec le paramètre par défaut expirer lorsque le navigateur est fermé. Ainsi, lorsque le navigateur est fermé et réouvert, le magasin de données locales pour se your_data rafraîchi par un appel côté serveur.

Notez que ce n'est pas exactement les mêmes que suppression la banque de données locale, il est mise à jour à la place du magasin de données locales chaque fois que le cookie expire. Toutefois, si votre objectif principal est de pouvoir stocker plus de 4K côté client (la limitation de la taille des cookies), cet appariement des cookies et le stockage local vous aidera à accomplir une taille de stockage plus grande en utilisant les mêmes paramètres d'expiration en tant que cookie .

  

Ici fortement recommandé d'utiliser sessionStorage

  • il est le même que localStorage mais détruire quand la session détruit / fermeture du navigateur
  • sessionStorage est également utile pour réduire le trafic réseau contre les cookies
  

pour une utilisation de la valeur de consigne

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

pour get valeur

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

cliquez ici pour une vue api

  

tous les moyens pour jeu sont

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

tous les moyens pour obtenir sont

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

Le cycle de vie est contrôlé par l'application / utilisateur.

De la norme :

  

Les agents utilisateurs doivent expirer les données des zones de stockage local uniquement pour des raisons de sécurité ou à la demande de le faire par l'utilisateur. Les agents utilisateurs doivent toujours éviter de supprimer des données alors qu'un script qui pourrait accéder à ces données est en cours d'exécution.

Dans le projet de W3C:

  

Les agents utilisateurs doivent expirer les données des zones de stockage local uniquement pour des raisons de sécurité ou à la demande de le faire par l'utilisateur. Les agents utilisateurs doivent toujours éviter de supprimer des données alors qu'un script qui pourrait accéder à ces données est en cours d'exécution.

Vous voulez faire vos mises à jour sur votre calendrier en utilisant setItem (clé, valeur); qui va ajouter ou mettre à jour la clé donnée avec les nouvelles données.

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

}

Si quelqu'un en utilisant jStorage Plugin de jQuery le, il peut être ajouter expiration avec la fonction setTTL si le plugin jStorage

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

Si quelqu'un cherche toujours une solution rapide et ne veulent pas les dépendances comme jquery etc j'ai écrit un mini-lib qui ajoutent à l'expiration du stockage local / séance / personnalisée, vous pouvez le trouver avec la source ici:

https://github.com/RonenNess/ExpiredStorage

Solution utilisant angulaire et 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'approche de sebarmeli est le meilleur à mon avis, mais si vous ne souhaitez que des données à persister pendant toute la durée d'une session alors sessionStorage est probablement une meilleure option:

  

Ceci est un objet global (sessionStorage) qui maintient une zone de stockage   qui est disponible pour la durée de la session de la page. Une session de la page   dure aussi longtemps que le navigateur est ouvert et se poursuit sur la page   rechargements et restaurations. Ouverture d'une page dans un nouvel onglet ou une fenêtre provoquera   une nouvelle session à initier.

MDN: sessionStorage

Pour le bénéfice des chercheurs:

Comme Fernando, je ne voulais pas ajouter une charge de JSON lorsque les valeurs stockées étaient simples. J'ai juste besoin de suivre une interaction de l'interface utilisateur et conserver les données pertinentes (par exemple comment un utilisateur a utilisé un site de commerce électronique avant de partir).

Cela ne répond everyones critères, mais nous l'espérons, une copie rapide + entrée de pâte pour quelqu'un et enregistrer en ajoutant une autre lib.

NOTE: Ce ne serait pas bon si vous avez besoin de récupérer les éléments individuellement

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

Vous pouvez essayer celui-ci.

var hours = 24; // Reset when storage is more than 24hours
var now = new Date().getTime();
var setupTime = localStorage.getItem('setupTime');
if (setupTime == null) {
     localStorage.setItem('setupTime', now)
} else {
    if(now-setupTime > hours*60*60*1000) {
         localStorage.clear()
         localStorage.setItem('setupTime', now);
    }
}
Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top