localStorage란?
localStorage는 웹 브라우저가 제공하는 Web Storage API 중 하나로, 도메인(같은 프로토콜, 도메인, 포트 기준) 내에서 영구적으로(브라우저 탭/창 닫아도 삭제 안 됨) 데이터를 저장할 수 있는 메커니즘입니다.
- 영구성: 세션을 넘어, 브라우저를 닫았다가 다시 열어도 데이터가 유지됨.
- 용량: 약 5MB 정도(브라우저별 상이), 쿠키(4KB 한계)보다 훨씬 큼.
- 도메인 단위 격리: 같은 도메인 내 모든 페이지에서 접근 가능하지만, 다른 도메인에서는 접근 불가.
- 데이터 형식: 문자열 형태만 저장 가능(직렬화 필요).
특징 및 동작 원리
-
브라우저 내장 저장소
- localStorage는 브라우저 내부에 문자열 데이터를 Key-Value 쌍으로 저장.
- 쿠키와 달리 서버로 전송되지 않으므로, 네트워크 트래픽 절감 가능.
-
도메인 별 분리
https://example.com과https://sub.example.com은 서로 다른 localStorage를 가짐.- 프로토콜(HTTP/HTTPS), 포트 번호가 다르면 다른 저장소로 취급.
-
영구성
- 사용자가 명시적으로 브라우저 캐시나 저장소를 지우지 않는 이상 남아있음.
- 세션 스토리지(sessionStorage)는 브라우저 탭/창을 닫으면 삭제된다는 점에서 차이가 있음.
-
문자열 기반 저장
- 모든 데이터를 문자열로 변환해서 저장(예: JSON 직렬화).
- 예:
localStorage.setItem("user", JSON.stringify({ name: "Alice" }));
localStorage API
1. setItem(key, value)
- 특정 키에 데이터를 저장.
- 예:
localStorage.setItem("username", "Alice");
2. getItem(key)
- 특정 키에 저장된 데이터를 가져옴.
- 예:
const user = localStorage.getItem("username"); // "Alice"
3. removeItem(key)
- 특정 키에 해당하는 데이터 삭제.
- 예:
localStorage.removeItem("username");
4. clear()
- 모든 localStorage 데이터 삭제.
- 예:
localStorage.clear();
5. key(index)
- 인덱스 기반으로 저장된 key를 가져옴 (순서는 브라우저 구현마다 다를 수 있음).
- 예:
const keyName = localStorage.key(0);
localStorage 사용 예시
<!DOCTYPE html>
<html>
<head>
<title>localStorage 예제</title>
</head>
<body>
<input type="text" id="inputName" placeholder="이름 입력" />
<button id="saveBtn">저장</button>
<button id="loadBtn">불러오기</button>
<p id="result"></p>
<script>
const saveBtn = document.getElementById("saveBtn");
const loadBtn = document.getElementById("loadBtn");
const inputName = document.getElementById("inputName");
const result = document.getElementById("result");
// 저장 버튼 클릭 시 localStorage에 값 저장
saveBtn.addEventListener("click", () => {
const name = inputName.value;
localStorage.setItem("savedName", name);
alert("이름이 저장되었습니다.");
});
// 불러오기 버튼 클릭 시 localStorage에서 값 가져와 표시
loadBtn.addEventListener("click", () => {
const saved = localStorage.getItem("savedName");
if (saved) {
result.textContent = `저장된 이름: ${saved}`;
} else {
result.textContent = "저장된 이름이 없습니다.";
}
});
</script>
</body>
</html>장점
-
영구성
- 브라우저 탭/창을 닫아도 데이터 유지.
-
대용량 저장
- 쿠키보다 큰 데이터 저장 가능(약 5MB).
-
네트워크 트래픽 절감
- 쿠키와 달리 서버 요청 시 헤더로 전송되지 않음.
-
쉬운 사용
- 간단한 API로 Key-Value 저장/삭제가 가능.
단점 및 주의사항
-
보안 이슈
- 암호화되지 않은 민감정보(예: 비밀번호, 토큰)는 저장 지양.
- XSS 공격 시 localStorage 접근 가능, 토큰 탈취 위험.
-
동기적 API
- localStorage 접근은 동기로 동작, 대용량 데이터 처리 시 브라우저 UI가 일시 멈출 수 있음.
-
문자열만 저장 가능
- JSON 직렬화/역직렬화 등 추가 과정 필요.
-
영구 저장
- 사용자가 로컬 데이터를 삭제하지 않는 이상 남아있으므로, 불필요한 데이터가 오래 남아 있을 수 있음.
보안 권장 사항
-
민감 정보 저장 금지
- 인증 토큰이나 비밀번호 같은 민감 데이터는 localStorage에 저장하지 않는 것이 좋음.
- 세션 쿠키 + HttpOnly, Secure 쿠키 활용 권장.
-
XSS 방지
- 안전하지 않은 스크립트 삽입을 방지하기 위해 CSP(Content Security Policy) 적용.
-
데이터 암호화
- 클라이언트에서 암호화해 저장해도 XSS에 노출될 수 있으므로, 가능하면 서버 측 세션 관리 권장.
localStorage vs sessionStorage vs 쿠키
| 특징 | localStorage | sessionStorage | 쿠키(Cookie) |
|---|---|---|---|
| 영구성 | 브라우저 닫아도 데이터 유지 | 브라우저 탭/창 닫으면 삭제 | 만료 시간 또는 세션 종료 시 삭제 |
| 저장 위치 | 클라이언트(브라우저) | 클라이언트(브라우저) | 클라이언트(브라우저), 서버와 함께 사용 가능 |
| 용량 | 약 5MB(브라우저별 상이) | 약 5MB(브라우저별 상이) | 4KB 정도 |
| 서버 전송 | XHR/Fetch 등으로 수동 전송 | XHR/Fetch 등으로 수동 전송 | 요청 시 자동으로 헤더에 포함 |
| 보안 | XSS 공격 시 노출 가능 | XSS 공격 시 노출 가능 | HttpOnly 쿠키 사용 시 JS 접근 불가능 |
결론
localStorage는 웹 애플리케이션에서 영구적인 클라이언트 측 데이터 저장을 위해 사용되는 간단하고 강력한 API입니다. 쿠키보다 큰 데이터를 저장할 수 있고, 서버에 자동 전송되지 않아 트래픽을 줄일 수 있는 장점이 있습니다. 다만 보안 이슈(XSS)에 주의해야 하며, 민감한 정보를 저장하는 것은 권장되지 않습니다.
🌱