웹 개발을 하다 보면 브라우저에 데이터를 저장해야 하는 경우가 빈번하게 발생합니다. 사용자의 로그인 상태를 유지하거나, 장바구니 정보를 기억하거나, 사용자가 설정한 테마(다크 모드/라이트 모드)를 보존하는 등 다양한 상황에서 브라우저 저장소의 필요성을 느끼게 됩니다.
이때 가장 간단하고 직관적으로 사용할 수 있는 기술 중 하나가 바로 자바스크립트 localStorage입니다. 이번 글에서는 localStorage의 개념부터 실제 사용법, 그리고 활용 시 주의해야 할 점까지 깊이 있게 다뤄보겠습니다.
localStorage는 HTML5에서 도입된 웹 스토리지(Web Storage) API의 한 종류로, 사용자의 웹 브라우저에 데이터를 영구적으로 저장할 수 있는 기능을 제공합니다. 쿠키(Cookie)와 비교되기도 하지만, 더 큰 저장 용량을 제공하고 서버로 매번 전송되지 않아 성능상 이점이 있습니다. 개발자로서 이 기능을 정확히 이해하고 활용한다면, 사용자 경험을 크게 향상시키는 웹 애플리케이션을 구축할 수 있습니다.
📥 localStorage란 무엇인가?
웹 스토리지 API의 핵심
localStorage를 이해하기 위해서는 먼저 웹 스토리지(Web Storage)의 개념을 알아야 합니다. 웹 스토리지는 서버가 아닌 클라이언트, 즉 사용자의 브라우저에 데이터를 저장할 수 있도록 지원하는 HTML5 표준 기술입니다. 웹 스토리지는 크게 localStorage와 sessionStorage 두 가지로 나뉩니다.
localStorage는 Key-Value(키-값) 쌍의 형태로 데이터를 저장합니다. 마치 자바스크립트의 일반 객체처럼, 고유한 key를 통해 특정 value에 접근하고 관리할 수 있습니다. 예를 들어, 사용자의 아이디를 저장하고 싶다면 'userId'라는 key에 'user123'이라는 value를 저장하는 방식입니다.
중요한 특징은 localStorage에 저장된 데이터는 동일한 출처(Same-Origin)에서만 접근이 가능하다는 점입니다. 출처는 프로토콜, 호스트(도메인), 포트 번호가 모두 같아야 함을 의미합니다. 예를 들어 https://example.com에서 저장한 데이터는 https://sub.example.com이나 http://example.com에서는 접근할 수 없습니다. 이는 데이터의 보안을 유지하는 중요한 정책입니다.
✨ localStorage의 주요 특징
localStorage는 몇 가지 뚜렷한 특징을 가지고 있어 특정 시나리오에서 매우 유용하게 사용될 수 있습니다.
넉넉한 저장 공간
과거에 주로 사용되던 쿠키는 약 4KB의 매우 작은 저장 공간만 제공했습니다. 하지만 localStorage는 브라우저에 따라 약 5MB에서 10MB에 달하는 비교적 큰 저장 공간을 제공합니다. 이 덕분에 단순한 텍스트뿐만 아니라, 비교적 복잡한 설정 정보나 캐시 데이터 등도 저장할 수 있게 되었습니다.
데이터의 영속성
localStorage의 가장 큰 특징은 데이터가 만료 기간 없이 영구적으로 저장된다는 점입니다. 브라우저를 종료하거나 심지어 컴퓨터를 재부팅해도 데이터는 그대로 남아있습니다. 데이터는 오직 자바스크립트 코드를 통해 명시적으로 삭제(removeItem(), clear())하거나, 사용자가 브라우저의 캐시 및 데이터를 직접 삭제할 때만 사라집니다.
문자열(String) 데이터 타입만 저장
localStorage는 모든 데이터를 문자열(String) 형태로만 저장합니다. 숫자, 불리언, 객체, 배열 등 다른 타입의 데이터를 저장하려고 하면 자동으로 문자열로 변환됩니다. 이 때문에 객체나 배열과 같은 복잡한 데이터를 저장하고 다시 사용하기 위해서는 추가적인 처리가 필요합니다. 이 부분은 아래에서 JSON을 활용하여 자세히 설명하겠습니다.
🛠️ localStorage 기본 사용법 (CRUD)
localStorage는 매우 간단하고 직관적인 메서드를 제공하여 데이터를 쉽게 생성(Create), 조회(Read), 수정(Update), 삭제(Delete)할 수 있습니다. window 객체에 포함되어 있어 window.localStorage 또는 간단하게 localStorage로 접근할 수 있습니다.
데이터 저장하기 (Create & Update) – setItem()
데이터를 저장하거나 기존 데이터를 수정할 때는 setItem() 메서드를 사용합니다. 이 메서드는 key와 value 두 개의 인자를 받습니다.
setItem()은 새로운 key를 사용하면 데이터를 생성하고, 이미 존재하는 key를 사용하면 해당 key의 value를 수정하는 역할을 동시에 수행합니다.
데이터 불러오기 (Read) – getItem()
저장된 데이터를 불러올 때는 getItem() 메서드를 사용합니다. 인자로 조회하고 싶은 key를 전달하면 해당 value를 반환합니다. 만약 해당 key가 존재하지 않으면 null을 반환합니다.
데이터 삭제하기 (Delete) – removeItem()
특정 데이터를 삭제하고 싶을 때는 removeItem() 메서드를 사용합니다. 삭제할 데이터의 key를 인자로 전달합니다.
모든 데이터 삭제하기 (Delete All) – clear()
localStorage에 저장된 모든 데이터를 한 번에 삭제하려면 clear() 메서드를 사용합니다.
기타 유용한 속성 및 메서드
⚠️ localStorage 활용 시 주의사항 및 실제 사례
localStorage는 편리하지만, 몇 가지 중요한 사항을 반드시 고려해야 합니다.
객체 및 배열 저장하기 – JSON 활용
앞서 언급했듯이 localStorage는 문자열만 저장할 수 있습니다. 자바스크립트 객체나 배열을 그대로 저장하려고 하면 "[object Object]"와 같은 의미 없는 문자열로 변환되어 버립니다.
이 문제를 해결하기 위해 JSON.stringify()와 JSON.parse()를 사용합니다.
“`javascript
// 사용자 설정 객체
const userSettings = {
theme: ‘dark’,
notifications: {
email: true,
sms: false
},
language: ‘ko’
};
// 1. 객체를 JSON 문자열로 변환하여 저장
localStorage.setItem(‘settings’, JSON.stringify(userSettings));
// 2. 저장된 문자열을 불러와서 다시 객체로 변환
const storedSettingsString = localStorage.getItem(‘settings’);
const parsedSettings = JSON.parse(storedSettingsString);
console.log(parsedSettings);
/*
{
theme: ‘dark’,
notifications: { email: true, sms: false },
language: ‘ko’
}
*/
console.log(parsedSettings.theme); // “dark”“`
보안 문제 – 민감한 정보는 저장 금지
localStorage는 보안에 매우 취약합니다. 자바스크립트를 통해 쉽게 접근할 수 있기 때문에, 사이트 간 스크립팅(XSS, Cross-Site Scripting) 공격에 노출되면 저장된 모든 데이터가 탈취될 수 있습니다.
따라서 비밀번호, 개인 식별 정보, 인증 토큰(JWT 등)과 같은 민감한 데이터는 절대로 localStorage에 저장해서는 안 됩니다. 이러한 정보는 서버 측 세션이나, 보안이 강화된 HttpOnly 속성을 가진 쿠키에 저장하는 것이 훨씬 안전합니다.
동기적(Synchronous) 동작
localStorage의 모든 API는 동기적으로 동작합니다. 즉, setItem()이나 getItem()과 같은 메서드가 호출되면 브라우저는 해당 작업이 완료될 때까지 다른 작업을 멈추고 기다립니다(메인 스레드 블로킹).
대부분의 경우 데이터의 크기가 작아 문제가 되지 않지만, 만약 매우 큰 데이터를 반복적으로 읽고 쓰는 작업을 수행한다면 웹 페이지의 성능 저하를 유발할 수 있습니다. 따라서 대용량 데이터를 처리해야 할 때는 IndexedDB와 같은 비동기적인 저장소 사용을 고려해야 합니다.
🚀 결론
localStorage는 브라우저에 간단한 데이터를 영구적으로 저장하기 위한 강력하고 편리한 도구입니다. 직관적인 API 덕분에 개발자가 쉽게 사용할 수 있으며, 사용자의 설정 유지, 비회원 장바구니, 최근 본 상품 목록 등 다양한 기능을 구현하는 데 매우 유용합니다.
하지만 그 편리함 이면에는 보안 취약점과 문자열만 저장 가능하다는 제약이 존재합니다. 따라서 민감한 정보는 절대 저장하지 말아야 하며, 객체나 배열을 다룰 때는 JSON을 활용하는 습관을 들여야 합니다. localStorage의 특징과 한계를 명확히 이해하고 적재적소에 활용한다면, 더욱 풍부하고 일관된 사용자 경험을 제공하는 웹 애플리케이션을 만들 수 있을 것입니다.
관련 글
림월드(RimWorld) 모드 추천 필수 모음집 (2025년 최신 호환성 완벽 가이드)
운전면허증 분실 해외여행 렌터카 대처법 (국제운전면허증, 재발급)
