반응형
브라우저 로컬스토리지(localStorage) 만료시간 설정하기
localStorage에서는 만료 시간을 제공하지 않는다. 하지만 자바스크립트를 사용하여 TTL(Time to Live)을 추가하여 특정 기간이 경과한 후 localStorage의 항목을 무효화할 수 있다.
아래 처럼 만료시간을 설정하면 된다.
- 저장될 원본 정보와 함께 예상 만료 시간을 저장
- 데이터 조회 시, 현재 시간과 저장된 만료 시간을 비교
- 현재 시간이 저장된 만료 시간보다 크면 null을 반환 후 저장소에서 제거하고, 그렇지 않으면 원래 정보를 반환
만료 시간이 있는 항목 저장
localStorage에 키를 설정하고 만료 시간을 함께 저장할 수 있는 함수
function setWithExpiry(key, value, ttl) {
const now = new Date()
// `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: now.getTime() + ttl,
}
localStorage.setItem(key, JSON.stringify(item))
}
여기에서 현재 ms 시간에 ms 단위의 TTL 값을 더하여 계산되는 만료 시간과 원래 값을 사용하여 새 개체를 만든다.
localStorage에는 문자열만 저장할 수 있으므로 항목을 JSON 문자열로 변환한다.
저장소에서 항목 가져오기
localStorage에서 항목을 검색하는 동안 만료 시간을 확인할 수 있다.
function getWithExpiry(key) {
const itemStr = localStorage.getItem(key)
// if the item doesn't exist, return null
if (!itemStr) {
return null
}
const item = JSON.parse(itemStr)
const now = new Date()
// compare the expiry time of the item with the current time
if (now.getTime() > item.expiry) {
// If the item is expired, delete the item from storage
// and return null
localStorage.removeItem(key)
return null
}
return item.value
}
localStorage에서 데이터을 검색할 때만 만료 조건을 확인한다. 데이터가 만료된 경우 localStorage에서 키를 제거한다.
전체 코드
만료된 localStorage를 사용하는 방법을 보여주는 작은 HTML 페이지
- “Set" 버튼은 입력 상자의 값을 5초 만료로 localStorage에 저장
- "Get" 버튼은 localStorage에서 값을 가져와 아래에 표시
- 스크립트에 정의된 setWithExpiry 및 getWithExpiry 기능을 사용
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>LocalStorage Expiry Example</title>
</head>
<body>
<button id="btn-set">Set</button>
<input id="input-set" />
<br /><br />
<button id="btn-get">Get</button>
<div>Value: <span id="value"></span></div>
<script>
const btnSet = document.getElementById("btn-set")
const btnGet = document.getElementById("btn-get")
const inputSet = document.getElementById("input-set")
const valueDisplay = document.getElementById("value")
btnSet.addEventListener("click", () => {
setWithExpiry("myKey", inputSet.value, 5000)
})
btnGet.addEventListener("click", () => {
const value = getWithExpiry("myKey")
valueDisplay.innerHTML = value
})
function setWithExpiry(key, value, ttl) {
const now = new Date()
// `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: now.getTime() + ttl,
}
localStorage.setItem(key, JSON.stringify(item))
}
function getWithExpiry(key) {
const itemStr = localStorage.getItem(key)
// if the item doesn't exist, return null
if (!itemStr) {
return null
}
const item = JSON.parse(itemStr)
const now = new Date()
// compare the expiry time of the item with the current time
if (now.getTime() > item.expiry) {
// If the item is expired, delete the item from storage
// and return null
localStorage.removeItem(key)
return null
}
return item.value
}
</script>
</body>
</html>
참고
- https://www.sohamkamani.com/javascript/localstorage-with-ttl-expiry/
반응형
'development' 카테고리의 다른 글
| 리액트에 구글 애드센스 다는 방법 (0) | 2022.09.26 |
|---|---|
| SPA도 애드센스(adsense) 통과 가능하다 (1) | 2022.09.25 |
| 자바스크립트 async, non-sync 함수 여부 검사 (0) | 2022.09.22 |
| 자바스크립트 call, apply, bind 정리 (0) | 2022.09.20 |
| 자바스크립트 브라우저 쿠키 가이드 (1) | 2022.09.19 |