localStorage & sessionStorage 사용하기

브라우저는 간단한 데이터를 위한 작은 저장소를 제공하는데, 쿠키와 로컬 스토리지(Local storage), 세션 스토리지(Session Storage) 가 바로 그것입니다.

 

쿠키에 대해서는 나중에 더 자세히 다뤄 보도록 하고, 오늘은 로컬 스토리지와 세션 스토리지에 대해 정리해보기로 하겠습니다.

1. 공통적인 특징

두 브라우저 저장소의 공통적인 특징으로는 쿠키와 달리 웹 서버로부터 고립되어 있다는 점입니다.

오리진에 종속되는 특징으로 인해 서버로부터의 영향을 절대 받지 않으며, 쿠키보다 더 많은 정보를 저장할 수 있다는 이점이 있습니다.  

 

[LocalStorage & SessionStorage 사용하기]

localStorage.setItem("name", "Chanmin");
localStorage.removeItem("name");
const name = localStorage.getItem("name");
localStorage.clear();

// sessionStorage 역시 동일한 메서드를 가진다.

로컬 스토리지와 세션 스토리지는 모두 키-값 형식으로 데이터를 관리하며 getter-setter 형식의 메서드를 통해 간단히 조작할 수 있습니다.

이제 두 저장소의 차이점을 알아보도록 하겠습니다.

2. 로컬 스토리지만의 특징

로컬 스토리지는 브라우저에 위치하며, 같은 오리진(~URL)이라면 모든 탭과 창에서 데이터가 공유됩니다.

한번 지금 보고있는 이 창에서 F12를 눌러 개발자 도구를 켠 다음, 콘솔창에 다음 코드를 입력해 보세요!

localStorage.setItem("name", "본인 이름");
localStorage.getItem("name");

그 결과 브라우저에 데이터가 키-값 형태로 저장된 것을 확인할 수 있는데, 새로고침을 하거나 브라우저를 종료해도 지금 이 링크에 들어와 localStorage.getItem("name")을 확인하면 저장한 값이 여전히 남아있는 것을 확인할 수 있습니다.

 

한 가지 주의할 점은 쿠키나 세션 스토리지와는 다르게 로컬 스토리지에 저장된 값은 자동으로 만료되지 않기 때문에 사용을 마치면 localStorage.removeItem("키") 나 localStorage.clear() 를 활용해 스토리지를 비워 주는 것이 좋습니다.

3. 세션 스토리지만의 특징

세션 스토리지는 로컬 스토리지와 거의 유사하나 한 가지 제약사항이 추가된다.

바로 오리진뿐만 아니라 브라우저의 탭에도 종속된다는 것인데, 위에서 했던 것처럼 현재 창에서 개발자 도구를 열고 코드를 입력해 보세요.

sessionStorage.setItem("name", "본인 이름");
sessionStorage.getItem("name");

새로고침을 해도 여전히 sessionStorage.getItem("name")을 통해 저장소에 접근할 수 있는 것을 확인할 수 있습니다.

그러나 로컬 스토리지와는 다르게 새 탭에서 이 글 링크에 접속하고 sessionStorage.getItem("name")을 입력하면 null을 출력하는데, 이를 통해 세션 스토리지에 저장되는 데이터는 해당 탭에서만 유효함을 확인할 수 있습니다.

 

브라우저 스토리지는 데이터베이스를 활용하기엔 아깝지만 저장소를 필요로 하는 작업에 제격인데, 한번 이를 활용해보고 싶다면 ko.javascript.info/localstorage 맨 하단의 과제를 풀어보는 것을 추천드립니다!

TL;DR

- 로컬 스토리지와 세션 스토리지는 서버의 영향을 받지 않는 브라우저의 내부 저장소다.

- 로컬 스토리지는 특정 오리진에 종속되며, 탭을 닫아도 데이터가 유지된다.

- 세션 스토리지는 로컬 스토리지와 유사하나 탭을 닫으면 즉시 초기화된다.