로컬 스토리지란? 쿠키와 차이부터 브라우저 저장 방식까지 쉽게 이해하기

홈페이지를 쓰다 보면 브라우저가 다크모드, 최근 메뉴, 임시 작성 내용, 화면 설정처럼 정보를 어느 정도 기억하는 경우가 있습니다. 이런 데이터를 브라우저에 저장하는 방법 중 하나가 로컬 스토리지(Local Storage)입니다.

쿠키와 비슷해 보이지만, 가장 큰 차이는 일반적인 HTTP 요청마다 서버로 자동 전송되지 않는다는 점입니다.

개인 사물함에 비유하면

홈페이지를 가게라고 생각해 보겠습니다. 쿠키가 사용자가 들고 다니며 직원에게 보여주는 번호표라면, 로컬 스토리지는 브라우저 안의 개인 사물함에 가깝습니다. 필요할 때 홈페이지 프로그램이 직접 꺼내 쓰고, 요청할 때마다 내용이 자동으로 전달되지는 않습니다.

어디에 저장될까?

사용자의 브라우저에 저장됩니다. Chrome에서 example.com에 저장한 값은 그 브라우저가 관리하고, Edge 등 다른 브라우저에는 자동으로 공유되지 않습니다.

왜 사용할까?

모든 정보를 서버에 둘 필요는 없습니다. 다크모드처럼 현재 브라우저에서만 기억하면 충분한 경우 theme=dark를 로컬 스토리지에 두면, 다음 방문 때 JavaScript가 읽어 화면을 맞출 수 있습니다.

새로고침·브라우저를 닫아도 남을까?

남을 수 있습니다. 페이지를 새로고침하거나 다른 페이지로 이동해도, 브라우저를 닫았다가 다시 열어도 값이 유지될 수 있습니다. 짧은 시간이 지나면 자동으로 사라지는 방식이 아닙니다. 프로그램이 지우거나 사용자가 사이트 데이터를 삭제할 때까지 남을 수 있습니다. 「브라우저를 껐으니 없어지겠지」는 정확하지 않습니다.

세션 스토리지와의 차이

• 로컬 스토리지 — 브라우저를 닫아도 남아 있을 수 있음 (집 서랍)
• 세션 스토리지 — 보통 해당 탭·세션이 끝나면 사라짐 (오늘만 쓰는 임시 보관함). 자세한 내용은 세션 스토리지란?을 참고하세요

쿠키와 무엇이 다를까?

• 쿠키 — 조건에 따라 HTTP 요청에 함께 서버로 전달될 수 있음. 로그인·세션에 자주 사용
• 로컬 스토리지 — 자동 전송되지 않음. JS가 읽고 필요할 때만 서버로 보냄. 화면 설정·임시 데이터에 적합

쿠키는 비교적 작고 만료를 설정할 수 있고, 로컬 스토리지는 일반적으로 용량이 더 크고 기본적으로 자동 만료가 없습니다. 자세한 쿠키 설명은 쿠키란?을 참고하세요.

더 안전한가? 비밀번호·토큰은?

서버에 자동으로 안 간다고 해서 안전한 금고는 아닙니다. 해당 페이지의 JavaScript가 값을 읽을 수 있고, XSS(악성 스크립트 실행)가 있으면 노출될 수 있습니다. 비밀번호를 password=…처럼 저장하는 것은 권장하지 않습니다.

인증 토큰을 로컬 스토리지에 두는 서비스도 있지만, XSS 시 탈취 위험을 고려해야 합니다. HttpOnly 쿠키는 일반 페이지 JS가 직접 못 읽게 제한할 수 있어, 로그인 세션은 그 구조를 쓰는 경우도 많습니다. 인증 맥락은 401·HTTPS 글도 함께 보면 좋습니다.

어떤 정보를 저장하기 좋을까?

• 다크모드 · 언어 · 상품 목록 정렬(그리드/리스트)
• 문의글·게시글 작성 중 임시 저장(새로고침 복원)
• 비로그인 사용자의 간단한 장바구니 초안(최종 가격·재고는 서버 검증 필수)

가격·권한을 믿으면 안 되는 이유

사용자는 개발자 도구로 값을 바꿀 수 있습니다. product_price=100, is_admin=true처럼 바꿔도 서버가 그대로 믿으면 큰 문제가 됩니다. 상품 가격·관리자 여부·결제 완료·회원 등급·할인율은 서버에서 다시 확인해야 합니다. 「손님이 수첩에 VIP라고 썼다고 VIP로 인정하면 안 되는 것」과 같습니다.

키와 값 · 용량 · 미디어

로컬 스토리지는 theme → dark처럼 이름표(Key)와 내용(Value)으로 저장합니다. 쿠키보다 용량이 큰 편이지만, 브라우저마다 한도가 있고 사진·동영상 같은 대용량에는 적합하지 않습니다. 서버 데이터베이스처럼 복잡한 검색·대규모 관리용도 아닙니다.

Origin · www · 서브도메인

일반적으로 출처(Origin)—프로토콜·도메인·포트—기준으로 분리됩니다. https://example.com과 http://example.com, www 유무, shop.·account. 서브도메인은 서로 다른 공간일 수 있습니다. 쿠키처럼 서브도메인 공유를 간단히 걸기 어렵습니다. 대표 주소를 하나로 통일하면 관리가 편합니다.

삭제 · 시크릿 · 기기 동기화

사이트 데이터를 지우면 다크모드·임시 글·비로그인 설정이 초기화될 수 있지만, 서버 회원계정은 그대로입니다. 시크릿 모드에서는 이용 중 별도 공간이 있을 수 있고, 창을 닫으면 지워지는 경우가 많습니다. 컴퓨터 Chrome에만 둔 설정은 스마트폰에 자동으로 안 넘어갑니다. 기기를 넘어 유지하려면 서버 회원정보와 동기화가 필요합니다. 백업도 서버처럼 중앙에서 되지 않습니다.

캐시·개인정보와의 관계

로컬 스토리지는 프로그램이 쓰는 메모장, 브라우저 캐시는 이미 받은 이미지·CSS·JS 창고에 가깝습니다. 자세한 차이는 브라우저 캐시란?을 참고하세요. 속도 개선에 설정을 재사용할 수는 있지만 웹 캐시를 완전히 대신하지는 않습니다. 식별·추적 목적 데이터를 저장하면 「쿠키」라는 이름과 무관하게 고지·동의 검토가 필요할 수 있습니다.

쿠키 · 로컬 · 세션 한눈에

• 쿠키 — 서버 자동 전달 가능 · 로그인·세션
• 로컬 스토리지 — 자동 전달 안 됨 · 삭제 전까지 유지 가능 · 사용자 설정
• 세션 스토리지 — 자동 전달 안 됨 · 보통 탭 세션 동안 · 임시 화면 데이터

주문·회원·결제·게시물처럼 반드시 보존·검증해야 하는 데이터는 서버가 맞고, 사라져도 큰 문제 없는 화면 설정은 로컬 스토리지를 쓸 수 있습니다.

자주 묻는 질문

브라우저를 닫으면 사라지나요?

일반적으로 유지될 수 있습니다. 프로그램 삭제나 사이트 데이터 삭제 시 사라질 수 있습니다.

다른 컴퓨터에서도 설정이 유지되나요?

일반적으로 아닙니다. 현재 브라우저에만 저장됩니다.

사용자가 값을 수정할 수 있나요?

가능합니다. 중요한 권한·가격은 로컬 값만으로 판단하면 안 됩니다.

정리

쿠키 = 서버와 주고받을 수 있는 번호표, 로컬 스토리지 = 브라우저 안의 개인 사물함으로 기억하면 됩니다. 다크모드·언어·임시 작성처럼 브라우저에서 기억하면 편리한 정보에 쓰고, 비밀번호·관리자 권한·상품 가격처럼 중요한 정보를 믿고 처리하는 용도로는 쓰지 마세요.

브라우저 탭을 쓰는 동안만 임시로 보관하고 싶을 때는 세션 스토리지(Session Storage)를 쓰는 경우도 있습니다. 자세한 내용은 세션 스토리지란?을 참고하세요.