HTML5 로컬 저장소의 항목은 언제 만료됩니까?

HTML5의 DOM 스토리지의 일부로 localStorage에 저장된 데이터는 얼마 동안 사용할 수 있습니까? 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와 같은 것은 매우 임시적인 데이터를 저장해야 할 때 편리합니다.

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

로컬 저장소는 만료 메커니즘을 제공하지 않지만 쿠키는 제공합니다. 로컬 스토리지 키를 쿠키와 간단히 연결하면 로컬 스토리지를 쿠키와 동일한 만료 매개 변수로 업데이트 할 수 있습니다.

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

이 예제는 브라우저를 닫을 때 기본 매개 변수를 가진 쿠키가 만료되도록 설정합니다. 따라서 브라우저를 닫았다가 다시 열면 your_data의 로컬 데이터 저장소가 서버 측 호출로 새로 고쳐집니다.

이는 로컬 데이터 저장소 를 제거 하는 것과 정확히 동일하지 않으며 대신 쿠키가 만료 될 때마다 로컬 데이터 저장소를 업데이트합니다. 그러나 4K 이상의 클라이언트 측 (쿠키 크기 제한)을 저장하는 것이 주요 목표라면 쿠키와 로컬 스토리지의이 쌍을 사용하면 쿠키와 동일한 만료 매개 변수를 사용하여 더 큰 스토리지 크기를 달성 할 수 있습니다. .

sessionStorage 를 사용하는 것이 좋습니다.

• localStorage 와 동일 하지만 세션이 파괴되거나 브라우저가 닫히면 파괴됩니다.
• 또한 localStorage 는 탭간에 공유 할 수 있지만 sessionStorage 는 현재 탭에서만 사용할 수 있지만 새로 고침 페이지에서 값이 변경되거나 페이지가 변경되지는 않습니다.
• sessionStorage는 쿠키에 대한 네트워크 트래픽을 줄이는데도 유용합니다

설정 값 사용

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

}

누군가 jQuery의 jStorage 플러그인을 사용하는 경우 jStorage 플러그인의 경우 setTTL 함수로 만료를 추가 할 수 있습니다

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

여전히 빠른 솔루션을 찾고 있고 jquery 등의 종속성을 원하지 않는 경우 로컬 / 세션 / 사용자 정의 스토리지에 만료를 추가하는 미니 라이브러리를 작성했습니다. 소스에서 찾을 수 있습니다.

https://github.com/RonenNess/ExpiredStorage

이것을 시도해 볼 수 있습니다.

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

각도 및 지역 분포를 사용하는 해결 방법 :

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

검색 자의 이익을 위해 :

Fernando와 마찬가지로 저장된 값이 단순했을 때 많은 json을 추가하고 싶지 않았습니다. UI 상호 작용을 추적하고 데이터와 관련성을 유지해야했습니다 (예 : 사용자가 체크 아웃하기 전에 전자 상거래 사이트를 사용한 방식).

이것은 모든 사람의 기준을 충족 시키지는 않지만 다른 사람을 위해 빠른 복사 + 붙여 넣기 스타터가되기를 바랍니다.

참고 : 항목을 개별적으로 검색해야하는 경우에는 좋지 않습니다.

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

브라우저 locaStorage 객체에 익숙한 경우 만료 시간을 제공 할 준비가되어 있지 않다는 것을 알고 있습니다. 그러나 Javascript를 사용하여 특정 시간이 경과 한 후 locaStorage의 항목을 무효화하기 위해 TTL (Time to Live)을 추가 할 수 있습니다.

function setLocalStorage(key, value, ttl) {
    // `item` is an object which contains the original value
    // as well as the time when it's supposed to expire
    const item = {
        value: value,
        expiry: ttl <= 0 ? -1 : new Date().getTime() + ttl
    };
    localStorage.setItem(key, JSON.stringify(item));
}

function getLocalStorage(key) {
    const itemStr = localStorage.getItem(key);
    // if the item doesn't exist, return null
    if (!itemStr) {
        return null;
    }
    const item = JSON.parse(itemStr);
    // compare the expiry time of the item with the current time
    if (item.expiry > 0 && new Date().getTime() > item.expiry) {
        // If the item is expired, delete the item from storage
        // and return null
        localStorage.removeItem(key);
        return null;
    }
    return item.value;
}