Kiedy elementy w pamięci lokalnej HTML5 wygasają?

Sugerowałbym przechowywanie znacznika czasu w obiekcie przechowywanym w localStorage

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

Możesz przeanalizować obiekt, pobrać znacznik czasu i porównać z bieżącą datą, a w razie potrzeby zaktualizować wartość obiektu.

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

compareTime(dateString, now); //to implement

Możesz użyć lscache . Obsługuje to automatycznie, w tym przypadki, w których rozmiar pamięci przekracza limit. Jeśli tak się stanie, rozpoczyna przycinanie przedmiotów, które są najbliżej określonej daty wygaśnięcia.

Z readme:

lscache.set

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

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

Jest to jedyna prawdziwa różnica między zwykłymi metodami przechowywania. Get, remove, etc działają tak samo.

Jeśli nie potrzebujesz tak dużej funkcjonalności, możesz po prostu zapisać znacznik czasu z wartością (poprzez JSON) i sprawdź, czy nie ma wygaśnięcia.

Warto zauważyć, że istnieje dobry powód, dla którego pamięć lokalna pozostaje w gestii użytkownika. Ale rzeczy takie jak lscache przydają się, gdy trzeba przechowywać bardzo tymczasowe dane.

Brynner Ferreira, przyniósł dobry punkt: przechowywanie klucza rodzeństwa, w którym znajduje się informacja o wygaśnięciu. W ten sposób, Jeśli masz dużą liczbę kluczy lub jeśli twoje wartości są dużymi obiektami Json , nie musisz ich analizować, aby uzyskać dostęp do znacznika czasu.

Oto ulepszona wersja:

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

Podczas gdy lokalne przechowywanie nie zapewnia mechanizmu wygaśnięcia, pliki cookie tak. Wystarczy sparować klucz pamięci lokalnej z plikiem cookie, aby zapewnić, że pamięć lokalna może być aktualizowana z tymi samymi parametrami wygaśnięcia, co plik cookie.

Przykład w 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

Ten przykład ustawia plik cookie z domyślnym parametrem, który wygaśnie po zamknięciu przeglądarki. Tak więc, gdy przeglądarka zostanie zamknięta i ponownie otwarta, lokalny magazyn danych dla your_data zostanie odświeżony po stronie serwera sprawdzam.

Należy pamiętać, że nie jest to dokładnie to samo, co usuwanie lokalnego magazynu danych, zamiast tego aktualizuje lokalny magazyn danych za każdym razem, gdy plik cookie wygaśnie. Jeśli jednak twoim głównym celem jest możliwość przechowywania więcej niż 4k po stronie klienta( ograniczenie rozmiaru pliku cookie), to powiązanie pliku cookie i pamięci lokalnej pomoże Ci osiągnąć większy rozmiar pamięci przy użyciu tych samych parametrów wygaśnięcia, co plik cookie.

Cykl życia jest kontrolowany przez aplikację / użytkownika.

Ze Standardu :

Agenci użytkowników powinni wygasać dane z lokalnych obszarów przechowywania tylko ze względów bezpieczeństwa lub na żądanie użytkownika. Agenci użytkowników powinni zawsze unikać usuwania danych podczas uruchamiania skryptu, który może uzyskać dostęp do tych danych.

Tutaj wysoce zalecane użycie sessionStorage

• jest to to samo co localStorage ale niszczyć po zniszczeniu sesji / zamknięciu przeglądarki
SessionStorage jest również przydatny do zmniejszenia ruchu sieciowego w przypadku plików cookie.]}

Dla ustawionej wartości użyj

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

Aby uzyskać wartość użyj

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

Kliknij tutaj, aby zobaczyć API

Wszystkie sposoby na zestaw są

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

Wszystkie sposoby na get to

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

Z projektu W3C:

Agenci użytkowników powinni wygasać dane z lokalnych obszarów przechowywania tylko ze względów bezpieczeństwa lub na żądanie użytkownika. Agenci użytkowników powinni zawsze unikać usuwania danych podczas uruchamiania skryptu, który może uzyskać dostęp do tych danych.

Będziesz chciał dokonać aktualizacji w swoim harmonogramie za pomocą setItem( klucz, wartość); który doda lub zaktualizuje dany klucz o nowe dane.

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

}

Jeśli ktoś używa wtyczki jStorage z jQuery można dodać expiry z funkcją settl jeśli wtyczka jStorage

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

Obejście za pomocą kątowego i lokalnego Forage:

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

})

@sebarmeli podejście jest moim zdaniem najlepsze, ale jeśli chcesz tylko, aby dane utrzymywały się przez całe życie sesji, to sessionStorage jest chyba lepszym rozwiązaniem:

Jest to obiekt globalny (sessionStorage), który utrzymuje obszar pamięci jest ona dostępna przez cały czas trwania sesji strony. Sesja na stronie trwa tak długo, jak długo przeglądarka jest otwarta i przetrwa na stronie przeładowuje i przywraca. Otwarcie strony w nowej karcie lub oknie spowoduje nowa sesja będzie rozpoczęty.

MDN: sessionStorage

Jeśli ktoś nadal szuka szybkiego rozwiązania i nie chce zależności takich jak jquery itp napisałem mini lib, który dodaje wygaśnięcie do local / session / custom storage, można go znaleźć ze źródłem tutaj:

Https://github.com/RonenNess/ExpiredStorage

Na korzyść poszukiwaczy:

Podobnie jak Fernando, nie chciałem dodawać obciążenia json, gdy zapisane wartości były proste. Po prostu musiałem śledzić interakcję z interfejsem użytkownika i zachować odpowiednie dane(np. jak użytkownik korzystał z witryny ecommerce przed sprawdzeniem).

To nie spełni wszystkich kryteriów, ale miejmy nadzieję, że będzie to szybki Starter kopiuj+wklej dla kogoś i zaoszczędzi dodawanie kolejnej lib.

Uwaga: to nie byłoby dobre, jeśli trzeba odzyskać elementy indywidualnie

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