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

StackOverflow https://stackoverflow.com/questions/2326943

  •  22-09-2019
  •  | 
  •  

Вопрос

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

Это было полезно?

Решение

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

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

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

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

Другие советы

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

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

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

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

Бриннер Феррейра привел хороший момент:хранение родственного ключа, где находится информация об истечении срока действия.Сюда, если у вас большое количество ключей или если ваши значения представляют собой большие объекты 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 обеспечивает простой способ обновления локального хранилища с теми же параметрами срока действия, что и для файла 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. .

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

  • это то же самое, что локальное хранилище но уничтожить, когда сеанс уничтожен/закрытие браузера
  • 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(key, value);это либо добавит, либо обновит данный ключ новыми данными.

// 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.

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

https://github.com/RonenNess/ExpiredStorage

Обходной путь с использованием 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:Хранилище сеансов

В пользу поисковиков:

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

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

ПРИМЕЧАНИЕ:Это было бы нехорошо, если вам нужно получить элементы по отдельности.

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

Вы можете попробовать это.

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);
    }
}
Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top