LocalStorage

LocalStorage는 브라우저에서 제공하는 클라이언트 측 저장소로, 사용자의 데이터를 브라우저에 영구적으로 저장할 수 있는 공간입니다. LocalStorage에 저장된 데이터는 사용자가 페이지를 새로고침하거나 브라우저를 닫았다가 다시 열어도 유지됩니다. 쿠키와 달리 만료 기한이 없으며, 비교적 큰 용량의 데이터를 저장할 수 있습니다.

LocalStorage의 주요 특징

1. 영구 저장: LocalStorage에 저장된 데이터는 브라우저를 닫거나 컴퓨터를 재부팅해도 삭제되지 않습니다.
2. 용량 제한: 일반적으로 도메인당 약 5MB의 데이터를 저장할 수 있습니다.
3. 도메인별 격리: 각 도메인에 대해 격리되어 있어, 다른 도메인에서는 접근할 수 없습니다.
4. 키-값 쌍: LocalStorage는 문자열 형태의 키-값 쌍으로 데이터를 저장합니다.

LocalStorage 사용 방법

1. 데이터 저장

LocalStorage에 데이터를 저장할 때는 localStorage.setItem(key, value)를 사용합니다.

js
코드 복사
// 데이터 저장
localStorage.setItem('username', 'JohnDoe');

여기서 username은 키, 'JohnDoe'는 저장할 값입니다.

2. 데이터 가져오기

저장된 데이터를 가져올 때는 localStorage.getItem(key)를 사용합니다.

js
코드 복사
// 데이터 가져오기
const username = localStorage.getItem('username');
console.log(username); // "JohnDoe"

3. 데이터 삭제

특정 키의 데이터를 삭제할 때는 localStorage.removeItem(key)를 사용합니다.

js
코드 복사
// 데이터 삭제
localStorage.removeItem('username');

4. 모든 데이터 삭제

LocalStorage에 저장된 모든 데이터를 삭제하려면 localStorage.clear()를 사용합니다.

js
코드 복사
// 모든 데이터 삭제
localStorage.clear();

5. 데이터 업데이트

LocalStorage에 저장된 데이터는 덮어쓰기 방식으로 업데이트할 수 있습니다. 동일한 키로 데이터를 저장하면 기존 값을 새 값으로 덮어씁니다.

js
코드 복사
// 데이터 업데이트
localStorage.setItem('username', 'JaneDoe'); // 기존 'username'의 값이 'JaneDoe'로 변경

JSON 데이터 저장

LocalStorage는 문자열만 저장할 수 있으므로, 객체나 배열 같은 복잡한 데이터를 저장하려면 JSON 형식으로 변환해야 합니다.

// 객체 저장
const user = { name: 'John Doe', age: 30 };
localStorage.setItem('user', JSON.stringify(user));

// 객체 가져오기
const storedUser = JSON.parse(localStorage.getItem('user'));
console.log(storedUser.name); // "John Doe"

사용 사례

• 사용자 설정: 테마, 언어 설정 등 사용자 환경 설정을 로컬에 저장하여 사용자가 다시 방문할 때 설정을 기억할 수 있도록 합니다.
• 장바구니: 전자 상거래 사이트에서 사용자가 선택한 장바구니 항목을 저장합니다.
• 인증 토큰: 로그인 상태를 유지하기 위한 인증 토큰을 저장합니다. (단, 보안상 민감한 정보는 저장하지 않는 것이 좋습니다.)

주의 사항

• 보안: LocalStorage에 저장된 데이터는 클라이언트 측에 있으므로, 민감한 정보를 저장하는 것은 보안 위험을 초래할 수 있습니다. 특히 비밀번호나 신용카드 정보와 같은 민감한 정보는 LocalStorage에 저장하지 않는 것이 좋습니다.
• 동일 출처 정책: LocalStorage는 동일 출처 정책(Same-Origin Policy)을 따르므로, 동일한 프로토콜, 호스트, 포트에서만 접근할 수 있습니다.

요약

LocalStorage는 브라우저에서 영구적으로 데이터를 저장하는 방법으로, 문자열 형태의 데이터를 키-값 쌍으로 저장합니다. 영구적으로 유지되는 데이터가 필요할 때 유용하며, 주로 사용자 설정, 장바구니 상태, 인증 토큰 등을 저장하는 데 사용됩니다.