localStorage 설정 만 료 시간

localstorage 는 사람 이 수 동 으로 제거 하지 않 는 것 을 제외 하고 브 라 우 저 에 계속 저 장 됩 니 다. 그러나 많은 경우 에 저 희 는 localstorage 가 만 료 되 는 시간 이 필요 할 수 있 습 니 다. 예 를 들 어 저 희 는 사용자 인증 token 을 클 라 이언 트 에 저장 하고 1 주일 안에 유효 하 며 일주일 이 넘 으 면 다시 로그 인 해 야 합 니 다. 그러면 이런 수 요 는 어떻게 실현 되 어야 하 는 지 알 아야 합 니 다.localstorage 자체 가 기한 이 지난 체 제 를 제공 하지 않 았 습 니 다. 그렇다면 우리 스스로 실현 할 수 밖 에 없습니다. 우 리 는 그 원형 에 이런 방법 을 직접 추가 할 수 있 습 니 다.

Storage.prototype.setExpire=(key,value,expire) =>{

};
Storage.setExpire(key,value,expire);

기한 이 지나 면 반드시 시간 을 기록 해 야 합 니 다. 우리 의 생각 은 설정 이 가치 가 있 을 때 현재 시간 을 기록 한 다음 에 가치 가 있 을 때 현재 시간 과 이전의 시간 차 가 특정한 범위 안에 있 는 지 판단 하고 범 위 를 초과 하면 현재 항목 을 비우 고 null 로 돌아 가 는 것 입 니 다.
값 에 시간 을 넣 으 려 면 형식 을 정의 해 야 합 니 다.

Storage.prototype.setExpire=(key, value, expire) =>{
    let obj={
        data:value,
        time:Date.now(),
        expire:expire
    };
    localStorage.setItem(key,JSON.stringify(obj));
}

아래 세 필드 포함
data 실제 값 time 현재 시간 스탬프 expire 만 료 시간
localstorage 가 설정 한 값 을 대상 으로 할 수 없 기 때문에 JSON. stringify 방법 을 사용 하여 문자열 로 바 꾸 었 습 니 다. 마지막 으로 사용 할 때 되 돌려 야 합 니 다.
이어서 저희 가 얻 는 방법 을 추가 하 겠 습 니 다.

Storage.prototype.getExpire= key =>{
    let val =localStorage.getItem(key);
    if(!val){
        return val;
    }
    val =JSON.parse(val);
    if(Date.now()-val.time>val.expire){
        localStorage.removeItem(key);
        return null;
    }
    return val.data;
}

저희 가 먼저 테스트 를 해 볼 수 있어 요.

localStorage.setExpire("token",'xxxxxx',5000);
window.setInterval(()=>{
    console.log(localStorage.getExpire("token"));
},1000)

본질 적 으로 우리 의 사 고 는 기한 이 지난 항목 을 정리 하 는 것 이 아니 라 얻 을 때 기한 이 지 났 는 지 판단 하고 기한 이 지나 면 다시 이 항목 을 제거 하 는 것 이다.