브라우저 저장소 완벽 가이드: localStorage와 sessionStorage의 차이와 사용법

웹 애플리케이션에서 다루는 데이터를 관리할 때 반드시 데이터베이스가 필요한 것은 아닙니다. 브라우저 자체에서 제공하는 웹 스토리지(Web Storage) 기능을 활용하면 별도의 서버 구축 없이도 클라이언트 측에 데이터를 손쉽게 저장할 수 있습니다.

이 기능은 Chrome(4버전 이상), Mozilla Firefox(3.5버전 이상), Internet Explorer(8버전 이상)는 물론, iOS와 Android 브라우저를 포함한 대부분의 최신 브라우저에서 지원됩니다.

브라우저 저장소에는 크게 두 가지 방식이 있습니다. 바로 localStorage와 sessionStorage입니다.

localStorage: 브라우저를 닫아도 유지되는 저장소

localStorage 객체에 저장된 데이터는 브라우저를 종료했다가 다시 실행해도 그대로 남아 있습니다. 따라서 사용자 설정, 테마 정보처럼 장기간 보관해야 할 데이터를 저장하기에 적합합니다.

데이터 저장하기 — setItem()

localStorage에 항목을 저장하려면 setItem() 메서드를 사용합니다. 이 메서드에는 키(key)와 값(value)을 인자로 전달해야 합니다.

예시: localStorage.setItem("mykey", "myvalue");

데이터 불러오기 — getItem()

localStorage에서 항목을 가져오려면 getItem() 메서드를 사용합니다. 이때 가져오고자 하는 데이터의 키를 인자로 전달합니다.

예시: localStorage.getItem("mykey");

특정 데이터 삭제하기 — removeItem()

removeItem() 메서드를 사용하면 특정 항목만 골라서 삭제할 수 있습니다. 삭제할 항목의 키를 인자로 전달하면 됩니다.

예시: localStorage.removeItem("mykey");

전체 데이터 삭제하기 — clear()

localStorage에 저장된 모든 데이터를 한 번에 지우려면 clear() 메서드를 호출합니다.

예시: localStorage.clear();

sessionStorage: 세션이 유지되는 동안만 저장되는 저장소

sessionStorage에 저장된 데이터는 사용자가 브라우저(또는 탭)를 닫는 순간 함께 삭제됩니다. 임시 폼 데이터나 세션 단위의 정보를 저장할 때 유용합니다.

데이터 저장하기

sessionStorage에 항목을 저장하는 방법 역시 setItem() 메서드를 사용하며, 사용법은 localStorage와 동일합니다.

예시: sessionStorage.setItem("mykey", "myvalue");

데이터 불러오기

예시: sessionStorage.getItem("mykey");

특정 데이터 삭제하기

예시: sessionStorage.removeItem("mykey");

전체 데이터 삭제하기

예시: sessionStorage.clear();

두 저장소의 차이 한눈에 보기

배열(Array)을 저장소에 저장하기

localStorage와 sessionStorage에는 단일 값뿐만 아니라 배열의 내용도 저장할 수 있습니다. 단, 저장 전에 반드시 문자열로 변환해야 하며, 이때 JSON.stringify() 메서드를 사용합니다.

다음과 같이 숫자로 이루어진 배열이 있다고 가정해 보겠습니다.

var ourArray = [1, 2, 3, 4, 5];

이 배열을 setItem() 메서드로 localStorage에 저장하려면 아래와 같이 작성합니다.

localStorage.setItem("ourarraykey", JSON.stringify(ourArray));

sessionStorage의 경우도 방식은 같습니다.

sessionStorage.setItem("ourarraykey", JSON.stringify(ourArray));

저장된 데이터를 다시 불러올 때는 JSON.parse() 메서드를 사용해 원래의 배열 형태로 되돌려 주어야 합니다.

var storedArray = localStorage.getItem("ourarraykey");
ourArray = JSON.parse(storedArray);

sessionStorage의 경우:

var storedArray = sessionStorage.getItem("ourarraykey");
ourArray = JSON.parse(storedArray);

마무리

localStorage와 sessionStorage는 사용법이 거의 동일하지만, 데이터가 유지되는 기간이 다르다는 점이 핵심적인 차이입니다. 데이터를 오래 보관해야 한다면 localStorage를, 브라우저 세션이 끝나면 사라져야 하는 임시 데이터라면 sessionStorage를 선택하는 것이 좋습니다. 상황에 맞는 저장소를 잘 활용하면 데이터베이스 없이도 효율적인 클라이언트 측 데이터 관리가 가능합니다.

참고로, freeCodeCamp의 오픈 소스 커리큘럼은 누구나 무료로 코딩을 배울 수 있도록 지원하며, 이미 4만 명 이상의 학습자가 개발자로 취업하는 데 성공했습니다.