LocalStorage는 수동으로 삭제하지 않는 한 항상 브라우저에 저장됩니다. 그러나 많은 경우 만료 시간을 갖기 위해 localStorage가 필요할 수 있습니다. 예를 들어 사용자 인증 토큰을 클라이언트에 저장하면 1주일 이내에 유효합니다. , 그리고 일주일이 넘으면 다시 로그인해야 하는데, 이 요구사항을 어떻게 구현하나요?
localStorage 자체는 만료 메커니즘을 제공하지 않는다는 점을 알아야 합니다. 이 경우 우리는 해당 메서드를 프로토타입에 직접 추가할 수 있습니다.
Storage.prototype.setExpire=(key,value,expire) =>{ };Storage.setExpire(key,value,expire);만료하려면 시간을 기록해야 합니다. 값을 설정할 때 현재 시간을 기록한 다음 값을 얻을 때 현재 시간과 이전 시간의 차이가 특정 범위 내에 있는지 판단하는 것이 좋습니다. 범위를 벗어나면 현재 항목을 지우고 null을 반환합니다.
값에 시간을 추가하려면 형식을 정의해야 합니다.
Storage.prototype.setExpire=(키, 값, 만료) =>{ let obj={ 데이터:값, 시간:Date.now(), 만료:만료 }; localStorage.setItem(key,JSON.stringify(obj)) ;}다음 3개 필드가 포함됩니다.
localStorage에서 설정한 값은 객체가 될 수 없기 때문에 여기서는 JSON.stringify 메서드를 사용하여 문자열로 변환하고, 사용 시 다시 변환해야 합니다.
그런 다음 얻는 방법을 추가합니다.
Storage.prototype.getExpire= key =>{ let val =localStorage.getItem(key); if(!val){ return val; } val =JSON.parse(val); >val.expire){ localStorage.removeItem(key); return null } return val.data;}먼저 테스트해볼 수 있어요
localStorage.setExpire(token,'xxxxxx',5000);window.setInterval(()=>{ console.log(localStorage.getExpire(token));},1000)본질적으로 우리의 아이디어는 만료된 항목을 정기적으로 정리하는 것이 아니라, 해당 항목을 획득할 때 만료되었는지 여부를 확인하고 만료된 항목을 삭제하는 것입니다.
위의 내용은 이 기사의 전체 내용입니다. 모든 분들의 학습에 도움이 되기를 바랍니다. 또한 모든 분들이 VeVb Wulin Network를 지지해 주시길 바랍니다.