JavaScript의 localStorage는 브라우저에 데이터를 영구적으로 저장할 수 있는 저장소 입니다. 페이지를 닫거나 브라우저를 종료해도 데이터가 유지되며, 사용자 인증 상태나 설정, 캐시데이터 등을 저장하는 데 주로 사용됩니다.
📖 주요 특징
- 브라우저를 닫거나 새로 고침해도 데이터 유지 : 세션 간에 데이터가 유지 됩니다.
- 문자열 형태로 저장 : 모든 데이터는 문자열 형태로 저장 되므로 객체를 저장하려면 JSON으로 변환해야 합니다.
- 동일 출처 정책 : 같은 도메인과 포트 내에서만 접근 가능하여 보안이 강화됩니다.
📖 기본 사용법
localStorage는 키-값 쌍으로 데이터를 저장, 검색, 삭제할 수 있습니다. 저장한 데이터는 세션간에 공유됩니다. 즉, 세션이 바뀌어도 저장한 데이터가 유지됩니다.
- setItem() - key, value 추가
- getItem() - value 읽어 오기
- removeItem() - item 삭제
- clear() - 도메인 내의 localStorage 값 삭제
- length - 전체 item 갯수
- key() - index로 key값 찾기
1. 데이터 저장
localStorage.setItem('username','JJS');2. 데이터 가져오기
const username = localStorage.getItem('username');3. 데이터 삭제
localStorage.removeItem('username');4. 모든 데이터 삭제
localStorage.clear();📖 객체 저장하기
localStorage는 문자열만 저장할 수 있으므로, 객체를 저장하려면 JSON으로 변환해야 합니다.
// 객체 저장하기
const user = {name : 'JJS', age : 30};
localStorage.setItem('user', JSON.stringify(user));
// 객체 가져오기
const storedUser = JSON.parse(localStorage.getItem('user'));
console.log(storedUser); // JJS📖 활용 예시
- 사용자 설정 저장 : 테마, 언어, 레이아웃 설정 등
- 간단한 데이터 캐싱 : API 데이터 캐싱
- 로그인 상태 유지 : 세션 정보를 저장하여 재로그인 필요 최소화
📖 제한 사항
- 저장 용량 제한 : 대부분의 브라우저는 도메인당 약 5~10MB로 제한 됩니다.
- 보안 : 사용자가 쉽게 접근 가능하여 민감한 데이터 저장에는 적합하지 않습니다.
localStorage는 데이터의 영구 저장이 필요한 웹 애플리케이션에서 매우 유용하며, 브라우저 기반의 간단한 저장소로 활용할 수 있습니다.
99