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

Question

Как долго доступны данные, хранящиеся в localStorage (как часть DOM Storage в HTML5)? Могу ли я установить срок действия данных, которые я помещаю в localStorage?

Answer 1

Я бы предложил сохранить метку времени в объекте , который вы храните в 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

Answer 2

Невозможно указать срок действия. Это полностью зависит от пользователя.

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

Конечно, возможно, что что-то, что ваше приложение хранит на клиенте, может не появиться там позже. Пользователь может явно избавиться от локального хранилища, или браузер может столкнуться с соображениями пространства. Хорошо программировать в обороне. Как правило, однако, вещи остаются "навсегда", основываясь на каком-то практическом определении этого слова.

edit & mdash; очевидно, ваше собственное приложение может активно удалять данные, если оно решит, что оно слишком старое. То есть вы можете явно включить какую-либо метку времени в то, что вы сохранили, а затем использовать ее позже, чтобы решить, следует ли сбрасывать информацию.

Answer 3

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

Из readme:

lscache.set

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

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

Это единственная реальная разница между обычными методами хранения. Получить, удалить и т. Д. Работают так же.

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

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

Answer 4

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

Answer 5

Хотя локальное хранилище не предоставляет механизм истечения срока действия, куки делают.Простое сопряжение ключа локального хранилища с файлом 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.Тем не менее, если ваша основная цель заключается в том, чтобы иметь возможность хранить более 4 КБ на стороне клиента (ограничение по размеру файлов cookie), такое сочетание файлов cookie и локального хранилища поможет вам добиться большего размера хранилища, используя те же параметры срока действия, что и файлы cookie.

Answer 6

Здесь настоятельно рекомендуется использовать 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");

Answer 7

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

Из стандарта :

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

Answer 8

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

}

Answer 9

Из черновика W3C:

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

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

Answer 10

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

https://github.com/RonenNess/ExpiredStorage