어제 오늘 내일

[Javascript] localStorage 만료 시간 설정하기 본문

IT/Javascript

[Javascript] localStorage 만료 시간 설정하기

hi.anna 2022. 3. 7. 12:25

 

localStorage는 세션이 변경되어도

데이터 정보가 그대로 유지됩니다.

이번에는 localStorage 데이터에 만료 시간을 설정하고,

일정 시간이 지나면, 데이터를 이용할 수 없도록 하는 방법을 알아보도록 하겠습니다.

 

 

Step1. 데이터 저장 시 만료일자 설정하기

// 만료 시간과 함께 데이터를 저장
function setItemWithExpireTime(keyName, keyValue, tts) {
  // localStorage에 저장할 객체
  const obj = {
    value : keyValue,
    expire : Date.now() + tts
  }

  // 객체를 JSON 문자열로 변환
  const objString = JSON.stringify(obj);

  // setItem
  window.localStorage.setItem(keyName, objString);
}

 

function setItemWithExpireTime(keyName, keyValue, tts)

이 함수는 localStorage에 저장할 key, value와 만료시간(tts)를 밀리세컨드 단위로 입력 받습니다.

 

const obj = {

  value : keyValue,

  expire : Date.now() + tts

}

localStorage에 저장할 객체를 하나 생성하고,

value값은 파라미터로 입력받은 keyValue를 세팅하고,

expire에는 '현재일자+만료기간' 을 세팅하여, 만료되는 시간을 세팅해 줍니다.

 

const objString = JSON.stringify(obj);

localStorage에는 객체를 저장할 수 없기 때문에,

위 구문을 이용해서 객체를 JSON 문자열로 변환해 줍니다.

 

window.localStorage.setItem(keyName, objString);

문자열로 변환한 객체를

파라미터로 입력받은 keyName과 함께

localStorage에 저장해줍니다.

 

 

 

Step2. 데이터를 읽을 때, 만료일자 체크하기

// 만료 시간을 체크하며 데이터 읽기
function getItemWithExpireTime(keyName) {
  
  // localStorage 값 읽기 (문자열)
  const objString = window.localStorage.getItem(keyName);
  
  // null 체크
  if(!objString) {
    return null;
  }
  
  // 문자열을 객체로 변환
  const obj = JSON.parse(objString);
  
  // 현재 시간과 localStorage의 expire 시간 비교
  if(Date.now() > obj.expire) {
    // 만료시간이 지난 item 삭제
    window.localStorage.removeItem(keyName);
    
    // null 리턴
    return null;
  }
  
  // 만료기간이 남아있는 경우, value 값 리턴
  return obj.value;
}

 

function getItemWithExpireTime(keyName)

localStorage에서 읽고 싶은 아이템의 key를 파라미터로 입력 받습니다.

 

const objString = window.localStorage.getItem(keyName);

localStorage에서 데이터를 읽어옵니다.

 

if(!objString) {

  return null;

}

localStorage에서 읽어온 데이터가 존재하는지 체크합니다.

만약, localStorage에 존재하지 않는 값이면 null을 리턴합니다.

 

if(Date.now() > obj.expire)

현재 시간과 localStorage에서 읽어온 객체의 expire 값을 비교합니다.

현재 시간이 expire 값보다 크다면, 

만료기간이 이미 지났다는 뜻이겠죠?

 

window.localStorage.removeItem(keyName);

return null;

이미 만료기간이 지났다면

localStorage에 저장되어 있던 아이템을 삭제하고,

이 함수는 null을 리턴합니다.

 

return obj.value;

만료기간이 지나지 않은 데이터는

localStorage에서 읽어온 값 중 value값을 찾아서 리턴합니다.

 

 

 

Step3. 만료일자와 함께 데이터 저장하고, 읽기

이제는 Step1, Step2 에서 만들어 놓은 함수들을 활용하는 예제입니다.

이 예제는

'data set' 버튼을 클릭하면, 

만료시간을 5초로 설정하여 'name' 데이터를 localStorage에 저장하고,

'data get' 버튼을 클릭하면,

만료시간을 체크하여 localStorage의 'name' 데이터를 읽어옵니다.

 

  <HTML>  

<input id='set_btn'
       type='button' 
       value='data set'
/>
<input id='get_btn'
       type='button' 
       value='data get' 
/>
<div id='result'></result>

 

  < Javascript >  

// 만료 시간과 함께 데이터를 저장
function setItemWithExpireTime(keyName, keyValue, tts) {
  // localStorage에 저장할 객체
  const obj = {
    value : keyValue,
    expire : Date.now() + tts
  }

  // 객체를 JSON 문자열로 변환
  const objString = JSON.stringify(obj);

  // setItem
  window.localStorage.setItem(keyName, objString);
}

// 만료 시간을 체크하며 데이터 읽기
function getItemWithExpireTime(keyName) {
  
  // localStorage 값 읽기 (문자열)
  const objString = window.localStorage.getItem(keyName);
  
  // null 체크
  if(!objString) {
    return null;
  }
  
  // 문자열을 객체로 변환
  const obj = JSON.parse(objString);
  
  // 현재 시간과 localStorage의 expire 시간 비교
  if(Date.now() > obj.expire) {
    // 만료시간이 지난 item 삭제
    window.localStorage.removeItem(keyName);
    
    // null 리턴
    return null;
  }
  
  // 만료기간이 남아있는 경우, value 값 리턴
  return obj.value;
}

// 'data set' 버튼 클릭
set_btn.addEventListener("click", () => {
  // localStorage에 5초 만료시간을 설정하고 데이터 저장
  setItemWithExpireTime("name", "anna", 5000)
})

// 'data get' 버튼 클릭
get_btn.addEventListener("click", () => {
  // localStorage의 데이터를 읽어온다
  const value = getItemWithExpireTime("name");
  
  // 읽어온 데이터를 화면에 출력한다
  const resultDiv = document.getElementById('result');
  resultDiv.innerText = value;
})

 

function setItemWithExpireTime(keyName, keyValue, tts)

Step1에서 설명한 만료일자를 설정하여 localStorage에 데이터를 저장하는 함수입니다.

 

function getItemWithExpireTime(keyName)

Step2에서 설명한 만료일자를 체크하여 localStorage 데이터를 읽어오는 함수입니다.

 

set_btn.addEventListern(.....

'data get' 버튼을 클릭하면 localStorage에 5초 만료시간을 설정하고,

key는 name, value는 anna인 데이터를 저장합니다.

 

get_btn.addEventListener(....

'data set' 버튼을 클릭하면

key가 'name'인 데이터를 만료기간을 체크하여 localStorage에서 읽어옵니다.

 

 

 

 

반응형
Comments