[javascript] 로컬 스토리지(Local Storage)란?

로컬 스토리지(Local Storage)란?

로컬 스토리지는 웹 브라우저에 데이터를 저장하는 공간입니다. 사용자가 웹사이트를 방문하면, 해당 웹사이트는 브라우저에 데이터를 저장할 수 있으며, 이 데이터는 사용자가 페이지를 새로 고치거나 브라우저를 닫아도 유지됩니다.

로컬 스토리지의 특징

1. 데이터 지속성: 브라우저를 껐다 켜도 데이터가 유지됩니다.
2. 도메인별 저장: 특정 웹사이트에서 저장한 데이터는 해당 웹사이트에서만 접근 가능합니다.
3. 5MB 저장 가능: 한 도메인당 최대 5MB까지 저장할 수 있습니다.
4. 보안 문제: 로컬 스토리지는 암호화되지 않으므로 중요한 정보(비밀번호, 카드 정보)는 저장하면 안 됩니다.

로컬 스토리지 사용법 (JavaScript)

데이터 저장하기

localStorage.setItem("username", "홍길동");

• "username"이라는 키(key)에 "홍길동" 값을 저장합니다.

데이터 가져오기

let name = localStorage.getItem("username");
console.log(name); // 출력: 홍길동

• "username" 키에 저장된 데이터를 가져옵니다.

데이터 삭제하기

localStorage.removeItem("username");

• "username" 키를 삭제합니다.

모든 데이터 삭제하기

localStorage.clear();

• 로컬 스토리지에 저장된 모든 데이터를 삭제합니다.

로컬 스토리지를 사용하는 경우

• 사용자 설정 저장 (예: 다크 모드 설정)
• 로그인 정보 유지 (단, 중요한 정보는 저장하지 않음)
• 쇼핑 카트 정보 저장 (사용자가 페이지를 새로고침해도 장바구니 유지)

로컬 스토리지와 쿠키 비교

비교 항목로컬 스토리지쿠키

데이터 유지 기간	브라우저를 닫아도 유지됨	유효 기간 설정 가능
저장 용량	약 5MB	약 4KB
서버 전송 여부	❌ 서버로 자동 전송 안 됨	✅ 서버에 자동 전송됨
보안	비교적 안전하지만 암호화 없음	암호화 가능하지만 해킹 위험 있음

결론

• 로컬 스토리지는 브라우저에서 데이터를 저장하는 공간입니다.
• 최대 5MB까지 저장 가능하며, 브라우저를 닫아도 유지됩니다.
• setItem(), getItem(), removeItem(), clear() 등의 메서드를 사용하여 데이터를 저장 및 삭제할 수 있습니다.
• 중요한 정보(비밀번호 등)는 저장하지 말아야 합니다.