웹 스토리지의 필요성
자바스크립트로 웹 개발을 하다보면 데이터를 어딘가에 저장해야 할 일이 생긴다. 그럴 때 DB서버나 클라우드 플랫폼에 데이터를 저장하는 경우도 많지만 반드시 클라이언트 단에서 가지고 있어야 하거나, 별로 중요하지 않은 데이터인 경우에는 클라이언트 단에서 저장하여 간직해야 한다.
웹 스토리지의 종류와 차이점
그러한 저장소 중 하나가 웹 스토리지(web storage)이다. 웹 트리지에는 로컬 스토리지(local storage)와 세션 스토리지(session storage)가 있다. 이 두가지 저장소의 차이점은 데이터가 어떤 범위 내에서 얼마나 오래 보존되느냐의 차이이다.
세션 스토리지는 웹페이지의 세션이 끝날 때 저장된 데이터가 지워지는 반면에, 로컬 스토리지는 웹페이지의 세션이 끝나더라도 데이터가 지워지지 않는다. 즉, 브라우저에서 같은 웹사이트를 여러 탭이나 창에 띄우면, 여러개의 세션 스토리지에 데이터가 서로 격리되어 저장되며, 각 탭이나 창이 닫힐 때 저장해둔 데이터도 함께 소멸한다. 반면, 로컬 스토리지는 여러 탭이나 창 간에 데이터가 서로 공유되며 탭이나 창을 닫아도 데이터는 브라우저에 남아 있는다.
하지만 이러한 로컬 스토리지의 데이터 영속성도 어디까지나 동일한 컴퓨터의 동일한 브라우저를 사용할 때만 유지된다. 즉, 컴퓨터가 달라지거나 다른 브라우저로 실행했을 때 스토리지 데이터는 공유되지 않는다.
이번 과제에서는 인증/인가에 대한 과제를 수행하면서 데이터를 local storage에 저장해서 진행해보았다.
로컬 스토리지 기본 API
웹 스토리지는 기본적으로 key와 value로 이루어진 데이터를 저장할 수 있다.
// 로컬 스토리지에 데이터 추가하기
localStorage.setItem("key", value);
// 로컬 스토리지에 데이터 조회하기
localStorage.getItem("key");
// 로컬 스토리지에 특정 데이터 삭제하기
localStorage.removeItem("key")
// 로컬 스토리지의 모든 데이터를 삭제하기
localStorage.clear();웹 스토리지를 이용할 때 주의할 점
- 엄밀하게는
window.localStorage를 사용해야하지만 window 객체의 대부분의 속성이 그렇듯 줄여서 localStorage로 접근할 수 있다. - 웹 스토리지는 오직 문자형 데이터 타입만 지원한다.
해결방법
이러한 문제를 피하기 위해서 많이 사용하는 방법이 JSON 형태로 데이터를 읽고 쓰는 것이다.
> localStorage.setItem('json', JSON.stringify({a: 1, b: 2}))
undefined
> JSON.parse(localStorage.getItem('json'))
{a: 1, b: 2}
