Когда истекает срок действия элементов в локальном хранилище HTML5?

Я бы предложил хранить метку в объект вы храните в localStorage

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

вы можете проанализировать объект, получить метку времени и сравнить с текущей датой, а при необходимости обновить значение объекта.

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

compareTime(dateString, now); //to implement

можно использовать lscache. Он делает это автоматически, включая случаи, когда размер хранилища превышает лимит. Если это происходит, он начинает обрезку элементов, которые ближе всего к их указанному сроку действия.

С readme:

lscache.set

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

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

это единственное реальное различие между обычными методами хранения. Get, remove и т. д. работают одинаково.

Если вам не нужно так много функциональности, вы можете просто сохранить время штамп со значением (через JSON)и проверить его на срок действия.

Примечательно, что есть веская причина, по которой локальное хранилище остается за пользователем. Но такие вещи, как lscache, действительно пригодятся, когда вам нужно хранить чрезвычайно временные данные.

Brynner Ferreira, принес хороший момент: хранение ключа брата, где находится информация об истечении срока действия. Таким образом, Если у вас есть большое количество ключей, или если ваши значения являются большими объектами Json, вам не нужно анализировать их, чтобы получить доступ к метке времени.

здесь следует улучшенная версия:

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

в то время как локальное хранилище не поставить механизм действия, куки. Простое сопряжение локального ключа хранения с файлом cookie обеспечивает простой способ гарантировать, что локальное хранилище может быть обновлено с теми же параметрами истечения срока действия, что и файл cookie.

пример в 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

в этом примере устанавливается файл cookie с параметром по умолчанию, срок действия которого истекает при закрытии браузера. Таким образом, когда браузер закрывается и вновь открывается, локальное хранилище данных для your_data обновляется по вызову на стороне сервера.

обратите внимание, что это не совсем то же самое, что удаление локальное хранилище данных вместо этого обновляет локальное хранилище данных всякий раз, когда истекает срок действия файла cookie. Однако, если ваша основная цель состоит в том, чтобы иметь возможность хранить более 4K на стороне клиента (ограничение для размера файла cookie), это сопряжение файла cookie и локального хранилища поможет вам выполнить больший размер хранилища, используя те же параметры истечения срока действия, что и файл cookie.

жизненный цикл управляется приложением / пользователем.

с стандартный:

срок действия пользовательских агентов должен истекать из локальных областей хранения только по соображениям безопасности или по запросу пользователя. Агенты пользователей всегда должны избегать удаления данных во время выполнения сценария, который может получить доступ к этим данным.

здесь настоятельно рекомендуется использовать sessionStorage

• это же как localStorage но уничтожить, когда сессия уничтожается / закрыть браузер
• sessionStorage также полезен для уменьшения сетевого трафика против cookie

для установки значения используйте

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

для получения значения используйте

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

кликните здесь для просмотра api

все пути для набора

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

все способы сделать это

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

из проекта W3C:

срок действия пользовательских агентов должен истекать из локальных областей хранения только по соображениям безопасности или по запросу пользователя. Агенты пользователей всегда должны избегать удаления данных во время выполнения сценария, который может получить доступ к этим данным.

вы хотите сделать ваши обновления по расписанию с помощью setItem (ключ, значение); это будет либо добавить или обновить данный ключ с новыми данными.

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

}

Если кто-то использует плагин jStorage из jQuery, он может добавить срок действия с функцией setTTL, если плагин jStorage

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

обходной путь с помощью angular и 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
        }
      })
    }
  }

})

подход@sebarmeli является лучшим на мой взгляд, но если вы хотите, чтобы данные сохранялись только в течение всего сеанса, то sessionStorage вероятно, лучший вариант:

Это глобальный объект (sessionStorage), который поддерживает область хранения это доступно в течение всего сеанса страницы. Сеанс страницы длится до тех пор, пока браузер открыт и выживает на странице обновляет и восстанавливает. Открытие страницы в новой вкладке или окне приведет новая сессия будет инициированный.

MDN: sessionStorage

Если кто-то все еще ищет быстрое решение и не хочет зависимостей, таких как jquery и т. д. Я написал мини-lib, который добавляет срок действия в локальное / сеансовое / пользовательское хранилище, вы можете найти его с источником здесь:

https://github.com/RonenNess/ExpiredStorage

в интересах поисковиков:

Как и Фернандо, я не хотел добавлять нагрузку json, когда сохраненные значения были простыми. Мне просто нужно было отслеживать некоторые взаимодействия с пользовательским интерфейсом и сохранять данные релевантными (например, как пользователь использовал сайт электронной коммерции перед проверкой).

Это не будет соответствовать всем критериям, но, надеюсь, будет быстрым копированием+вставкой стартера для кого-то и сохранением добавления другого lib.

Примечание: это не было бы хорошо, если вам нужно получить детали индивидуально.

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