localStorage vs Cookie 만료시간 설정하기

 

💡 localStorage vs Cookie 만료시간 설정하기

로그인할 때 jwt web token을 받아서 로컬스토리지에 저장해 두고 api 호출을 할 때마다 꺼내 쓸 때가 많다. 

따로 만료시간을 정해놓고 쓰지는 않았는데, 이번에 프로젝트를 진행하면서 로직이 수정되고 하면서 토큰 자체를 지워내서 자동로그아웃을 시켜버려야 하는 상황이 발생했다. 

 

그래서 난 고민에 빠졌다. 원래 localStorage에 토큰을 저장해두고 사용했는데, localStorage에 저장하지 않고 쿠키나 sessionStorage에 저장해서 만료 시간을 설정해야 하는 걸까? 라며 이리저리 검색을 해보았다. 로컬스토리지에 만료시간을 저장해서 사용할 수 있는 방법도 있었다. 그래서 또 다른 고민에 빠졌다. 어떤 게 더 좋은 방법일까?

 

 

 

1. localStorage에 만료시간 설정하기

로컬스트로지는 브라우저탭을 닫아도 삭제가 되지 않는 영구적인 저장소이다. 그래서 따로 만료시간을 설정할 수 있는 그런 기능이 있는 것은 아니다. 하지만 데이터 유효시간을 설정해서 토큰을 지워주면 마치 자동으로 사라진 것 같은 기능을 구현할 수 있다. 

그래서 Token을 저장할 때 유효시간을 함께 저장해 주고 그 시간이 현재의 시간보다 지나쳤을 때 토큰을 지워주면 된다. 

 

아래의 코드를 보면 이해하시기 쉬울거에요. 주석도 달아보았답니다.

//localstorage save with expires date

//setItem
export const setWithExpire = (key, value, exp) =>{
  let now = new Date()  //현재 날짜와 시간 
  const item = { value: value, expires : now.getTime() + exp*60*1000*1000}
  // item의 형태로 로컬에 저장해준다 expires는 만료시간 
  localStorage.setItem(key, JSON.stringify(item))
}



//getItem
export const getWithExpire = (key) => {
  //keys는 로컬스토리지에 저장된 이름으로 
  const itemStr = localStorage.getItem(key)
  //key에 해당하는 value를 들고 온다. 
  
  if(!itemStr){
    return null
  }

  //JSON.parse를 사용해 JSON문자열을 javascript객체화해준다.
  const item = JSON.parse(itemStr)
  //현재 날짜와 시간
  const now = new Date()
  
  //현재 시간이 만료시간보다 넘어가면 로컬스토리지에 있는 저장된 것을 지워준다. 
  if(now.getTime() > item.expires){
    localStorage.removeItem(key)
    return null
  }
  
  //시간을 넘지 않았다면 해당 value를 반환해준다
  return item.value
}

 

 

2. Cookies에 만료시간과 함께 저장하기

 

오랜만에 쿠키에 뭔가를 저장하는 코드를 써서 중간에 엄청 버벅거렸다. 서버가 아닌 클라이언트에 뭔가를 저장하기 위해서 자주 사용하는 쿠키. 저장할 수 있는 데이터 사이즈에 제한이 있고, expire, path, domain 등 여러 속성을 선택적으로 추가해서 사용할 수 있다는 이점이 있다.  저처럼 react 프로젝트를 하시는 분들은 react-cookie라는 패키지도 있어서 리액트 훅을 사용해서 더욱 간편하게 구현하실 수 있다. 저는 주로 자바스크립트를 이용해서 사용했었던 기억이 많아서 그 기억을 더듬어 작성해 보았다.

 

//쿠키에 저장하기
export const getCookies = (name) => {
  let value = ';'+document.cookie;
  let parts = value.split("; " + name + "=");
  if(parts.length === 2){
    return parts.pop().split(';').shift();
  }
}


//쿠키에 셋팅해주기
export const setCookies = (name, value, exp ) => {
  let date = new Date();
  date.setTime(date.getTime() + exp*60*1000);
  document.cookie = `${name}=${value}; expires=${date.toUTCString()}`;
}


//쿠키에서 삭제~
export const deleteCookies = (name) => {
  let date = new Date("2020-01-01").toUTCString();
  console.log(date);
  document.cookie = name+"=; expires="+date;
}

 

 

 

 

그래서 둘 중에 뭐?

 

로컬스토리지에 유효시간을 저장해서 사용하기!

 

아래의 첫번째 이유 빼고는 사실 쿠키 단점으로 인해서이다. 

1. localStorage를 많이 활용. 이미 로컬스토리지에 정말 많은 것을 담아 쓰고 있는 상황이기도 했고, 현재 프로젝트에 각기 엔드포인트가 다른 token이 두 가지가 있는데, 따로 쓰게 되면 불편함이 있을 것이라는 판단이 있었습니다. 

2. 보안에 취약하다. 쿠키값을 그대로 요청하다

3. 웹 브라우저를 변경할 경우 다른 웹브라우저에서 저장한 쿠키값을 사용할 수 없다.

4.사용자가 보안상의 문제로 거부할 경우 사용 불가함

5. 네트워크 부하 : 쿠키의 크기가 클 경우 네트워크 부하가 커짐

 

 

 

 

 

 

 

 

 

 

 

 

 

참고자료

[자바스크립트] LocalStorage 만료 시간 설정

 

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