Local Storage

📦 로컬 스토리지(LocalStorage)

로컬 스토리지(LocalStorage)는 웹 브라우저에 데이터를 영구적으로 저장할 수 있는 클라이언트 사이드 저장소입니다.
한 번 저장된 데이터는 사용자가 브라우저 데이터를 지우거나 캐시를 삭제하기 전까지 유지됩니다. 다만 로컬에 데이터를 저장하기 때문에 다른 사람과 업로드한 데이터를 공유 할수는 없다라는 단점이 있습니다.

---

로컬 스토리지의 특징

1. 영구 저장
   • 브라우저를 닫거나 컴퓨터를 재부팅해도 데이터가 삭제되지 않습니다.
2. 도메인 단위로 저장
   • 같은 도메인 내에서는 저장된 데이터를 공유할 수 있습니다.
   • 다른 도메인에서는 접근할 수 없습니다.
3. 용량 제한
   • 대략 5~10MB 정도의 데이터를 저장할 수 있습니다.
   • 브라우저마다 차이가 있을 수 있습니다.
4. 문자열(String)만 저장 가능
   • 모든 데이터는 문자열(String) 형태로 저장됩니다.
   • JSON 데이터를 저장할 경우 JSON.stringify()로 변환 후 저장해야 합니다.
   • 읽어올 때는 JSON.parse()를 사용해야 합니다.

---

📝 로컬 스토리지 주요 메서드

1. 데이터 저장하기 - setItem

localStorage.setItem('key', 'value');
key: 저장할 데이터의 키(이름)

• key: 저장할 데이터의 키(이름)
• value: 저장할 데이터 (반드시 문자열 형태여야 함

---

2. 데이터 불러오기 - getItem

const value = localStorage.getItem('key');

• 해당 키의 값을 반환합니다.
• 존재하지 않는 키를 호출하면 null을 반환합니다.

---

3. 데이터 삭제하기 - removeItem

localStorage.removeItem('key');

 

• 특정 키의 데이터를 삭제합니다.

---

4. 모든 데이터 삭제하기 - clear

localStorage.clear();

• 모든 로컬 스토리지 데이터를 삭제합니다.
• 주의: 삭제 후 복구할 수 없습니다.