로컬스토리지

로컬 스토리지란🤔

웹 브라우저에 데이터를 저장하는 방법 중 하나로,
브라우저를 닫거나 다시 열어도 유지되는 데이터 저장소

 

• 저장 용량 : 일반적으로 약 5MB 정도의 용량을 제공
• 문자열 형태로 저장: 모든 데이터는 문자열(string) 형식으로 저장
• 동기적 동작: 로컬스토리지는 동기적으로 작동하므로, 데이터를 저장하거나 가져오는 작업은 즉시 완료
• 영구적 저장: 사용자가 직접 데이터를 삭제하거나 브라우저 데이터를 초기화하지 않는 한, 데이터는 유지

---

언제 사용🤔

• 사용자 설정 저장: 테마, 레이아웃 설정 등 웹사이트의 사용자 설정을 저장할 때
• 사용자 세션 유지: 로그인 상태 또는 쇼핑 카트 정보를 유지할 때
• 오프라인 데이터 저장: 오프라인 상태에서도 사용할 수 있도록 데이터를 미리 저장해 둘 때

---

문법💫

setItem

로컬스토리지에 데이터를 저장할 때

localStorage.setItem('username', 'JohnDoe');  // 'username' 키로 'JohnDoe' 저장

 

 

localStorage.getItem

저장된 데이터를 가져올 때

const username = localStorage.getItem('username');  // 'JohnDoe' 반환
console.log(username);  // 출력: 'JohnDoe'

 

localStorage.removeItem

특정 데이터를 삭제할 때

localStorage.removeItem('key');

 

JSON.stringify

로컬스토리지는 문자열 형태로만 데이터를 저장하기 때문에 객체를 저장할 때는 JSON으로 변환할 때

const user = { name: 'John', age: 30 };
localStorage.setItem('user', JSON.stringify(user));  // 객체를 JSON 문자열로 변환해서 저장

 

JSON.parse

다시 객체로 변환해서 저장한 객체 데이터를 가져올 때

const user = JSON.parse(localStorage.getItem('user'));  // JSON 문자열을 객체로 변환
console.log(user.name);  // 출력: 'John'