JWT를 이용해서 로그인을 구현하다 보면, 토큰을 어디에 저장할 것인지 결정해야 하는 순간이 온다. 로컬스토리지에 저장하기, 세션스토리지에 저장하기, 쿠키에 저장하기 등등 여러 방법들을 마주할 것이다. 나는 주로 로컬스토리지에 저장하는 것으로 구현하곤 하는데, 로컬스토리지라는 것 자체에 궁금증이 생겨 찾아보고 정리해본다.
LocalStorage란?
LocalStorage는 브라우저에서 제공하는 웹 저장소로, 웹 애플리케이션의 데이터를 클라이언트 측에 영구적으로 저장할 수 있는 기능이다. LocalStorage는 세션이 종료되거나 브라우저가 닫혀도 데이터를 유지하며, 웹 애플리케이션에서 서버와의 통신 없이도 데이터를 관리할 수 있게 해 준다. HTML5 표준에서 추가된 기능으로, 모든 최신 브라우저가 이 기능을 지원한다.
LocalStorage의 메모리 영역
LocalStorage는 각 도메인(Origin)별로 독립된 메모리 공간을 사용하며, 도메인별로 할당된 메모리의 양은 브라우저마다 상이하다. 일반적으로 브라우저에서 할당된 용량은 약 5MB 정도이며, 이 용량 한도 내에서 문자열 형태의 데이터를 저장할 수 있다. Chrome, Firefox, Safari, Edge, Opera 모두 약 5MB 정도의 제한을 두고 있다. LocalStorage는 비휘발성 메모리를 사용하기 때문에, 페이지를 새로고침하거나 브라우저를 닫았다가 다시 열더라도 저장된 데이터를 유지한다.
자바스크립트에서 LocalStorage 사용 방법
LocalStorage는 딕셔너리와 같은 키-값 쌍(key-value pair) 형식으로 데이터를 저장한다. 모든 값은 반드시 문자열이어야 하며, 숫자, 객체 등의 다른 데이터 타입은 문자열로 변환한 후에 저장해야 한다.
저장: localStorage.setItem()
localStorage.setItem('key', 'value');
localStorage.setItem('userId', this.userId); // 예시
조회: localStorage.getItem()
let value = localStorage.getItem('key');
console.log(value); // 'value' 출력
삭제: localStorage.removeItem(), localStorage.clear()
localStorage.removeItem('key'); // 'key'에 해당하는 값 삭제
localStorage.clear(); // 모든 데이터 삭제
// 삭제되어 없는 값을 조회하게 되면 null을 반환한다
저장된 데이터 개수 확인: localStorage.length
let length = localStorage.length;
console.log(length); // 저장된 데이터의 개수 출력
저장된 데이터의 키 조회: localStorage.key()
let key = localStorage.key(0);
console.log(key); // 첫 번째로 지정된 키 값 출력
LocalStorage가 삭제되는 경우
내가 LocalStorage에 대해 찾아본 이유로, 저장하고 있는 값이 혹시 없어지는 경우가 존재하는지 궁금했다. 기본적으로 LocalStorage는 데이터를 영구적으로 저장하는 공간이다. 따라서, 수동으로 삭제하지 않는 한 데이터가 자동으로 제거되지는 않는다. 브라우저를 닫아도 데이터는 유지되며, 사용자가 직접 localStorage.clear()나 localStorage.removeItem()을 호출하지 않는 이상 계속 보존된다. 다만 몇 가지 경우에는 데이터가 제거될 수 있는데 그러한 경우는 다음과 같다.
- 사용자가 브라우저 캐시를 삭제하는 경우
- 브라우저나 운영체제가 제공하는 디스크 정리 기능을 사용하는 경우
- 특정 브라우저(특히 Safari)는 디스크 공간이 부족할 때 LocalStorage 데이터를 자동으로 정리할 수 있다
LocalStorage를 사용하는 적절한 시점
LocalStorage는 데이터를 장기간 유지해야 하는 경우에 적합하다. 주로 다음과 같은 상황에서 유용하게 사용할 수 있다.
- 사용자 설정 (ex. 다크 모드 여부, 언어 설정 등)을 저장할 때
- 비로그인 상태에서 사용자의 상태를 유지해야 할 때
- 캐시 용도로 데이터를 저장해 서버 요청을 줄이고 성능을 개선할 때
- 쇼핑 카트나 폼 데이터를 저장해 사용자 경험을 향상시킬 때
주의사항
LocalStorage를 사용할 때 몇 가지 주의할 점들이 있다. 기본적으로 LocalStorage는 동기적으로 작동하므로, 대량의 데이터를 읽고 쓰는 작업은 성능에 영향을 줄 수 있다. 그리고 모든 데이터는 문자열 형태로 저장되므로, JSON 객체는 JSON.stringify()와 JSON.parse()를 통해 문자열로 변환한 뒤 사용해야 한다. 마지막으로 LocalStorage는 보안 취약점을 가질 수 있다. 민감한 정보를 LocalStorage에 저장하는 것은 바람직하지 않으며 보안이 필요한 데이터는 서버에서 관리하는 것이 좋다.
LocalStorage와 다른 웹 저장소의 차이
LocalStorage 외에도 브라우저에는 SessionStorage와 쿠키(Cookie)가 있다. 이들 간의 차이점을 간략하게 정리하면 다음과 같다.
- LocalStorage: 도메인 별로 저장되며, 브라우저가 닫혀도 데이터가 유지된다. 대개 5MB까지 저장 가능
- SessionStorage: LocalStorage와 비슷하지만 세션이 끝날 때(즉, 탭이나 창을 닫을 때) 데이터가 제거
- 쿠키(Cookie): 서버와 클라이언트 간의 데이터 전달을 위해 주로 사용되며, LocalStorage보다 용량이 매우 제한적(4KB)이다. 쿠키는 만료 시간을 설정할 수 있다.