localStorage는 언제 쓰면 되는가

웹 개발을 하다 보면 localStorage를 마주하게 된다.
Vue 프로젝트에서도 새로고침 후에도 상태를 유지하거나, 사용자 설정을 저장하는 용도로 많이 사용된다.
하지만 편하다고 아무 데나 쓰면 보안이나 사용자 경험 측면에서 큰 문제가 될 수 있다.
이 글에서는 localStorage의 개념과 실제로 어떻게, 언제 써야 안전한지 정리해본다.

 

localStorage란?

• 브라우저가 제공하는 클라이언트 측 저장소
• key-value 형태로 데이터를 저장하며, 모든 데이터는 문자열로 저장됨
• 동기 API이며, 새로고침하거나 브라우저를 꺼도 데이터는 유지됨

localStorage.setItem('nickname', 'seonho')
localStorage.getItem('nickname') // 'seonho'

 

 

 

localStorage는 언제 쓰면 좋은가?

사용자 비회원 상태의 간단한 UI 상태 저장

• 테마 모드 (다크/라이트)
• 마지막으로 열었던 탭
• 입력값 임시 저장

로그인 없이도 쓸 수 있는 기능

• 장바구니
• 최근 본 상품
• 임시 채팅 내용

서버와 연결 없이도 작동해야 하는 앱 상태 저장

• 로컬용 메모장, 계산기, 개인 프로젝트 등

 

localStorage는 언제 쓰면 안 되는가?

민감한 정보 저장

• 비밀번호, 주민번호, 카드정보, 토큰 그대로 저장 → 절대 금지

사용자 인증 상태를 localStorage만으로 관리

• isAdmin: true 같은 값은 누구나 수정 가능
• 개발자 도구에서 쉽게 조작 가능하기 때문에, 권한 확인은 항상 서버에서 처리해야 함

사용자 데이터 보존이 중요한 서비스에서 단독 사용

• 브라우저나 기기, 시크릿 모드가 바뀌면 저장된 내용은 사라질 수 있음
• 로그인 기반 서비스는 서버 DB에 저장하는 게 원칙

 

실무에서는 이렇게 쓴다

1. 로그인 시 서버에서 JWT 토큰을 발급
2. 토큰만 localStorage에 저장 (localStorage.setItem('token', ...))
3. 페이지가 새로고침되면 토큰을 꺼내 사용자 정보를 서버에서 다시 조회
4. 민감한 정보는 절대 localStorage에 저장하지 않음
5. 로그아웃 시 localStorage 초기화

 

브라우저 캐시와는 뭐가 다를까?

• localStorage는 개발자가 직접 저장하고 꺼내는 저장소
• 브라우저 캐시는 HTML/CSS/JS 같은 정적 리소스를 브라우저가 자동으로 저장해서 다시 빠르게 불러오는 기능
• 캐시는 자동, localStorage는 수동

테마, 탭 위치, 폼 값 저장	가능 ✅
장바구니, 최근 본 항목	가능 ✅
로그인 토큰 저장 (주의해서)	가능 ✅
비밀번호, 개인정보 저장	금지 ❌
관리자 권한 여부 저장	금지 ❌
서버 없이 사용자 데이터 영구 저장	비추 ⚠️

 

 

localStorage는 빠르고 단순해서 Vue 같은 프론트엔드 프레임워크에서 자주 사용된다.
하지만 그만큼 어디까지 저장하고, 어디부터는 서버로 넘겨야 할지 경계선을 분명히 두는 게 중요하다.