기존에 알고 있었지만 다시한번 정리해두자.

사실 객체 형태나 배열 형태로 저장가능 한 사실은 몰랐는데..

---

📌Storage : 저장

localStorage

• 브라우저에 데이터를 영구적으로 저장할 수 있는 API
• 브라우저를 닫고 다시 열어도 데이터가 유지됨
• 최대 5MB까지 데이터를 저장할 수 있음
• 주로 사용자 설정, 게임 진행 상황 등을 저장하는 데 사용됨

sessionStorage

• 브라우저에 데이터를 임시로 저장할 수 있는 API
• 브라우저 세션(탭 또는 창)이 종료되면 데이터가 삭제됨
• 최대 5MB까지 데이터를 저장할 수 있음
• 주로 임시 데이터나 페이지 간 데이터 전달에 사용됨

공통점

• key-value 형태로 데이터를 저장 / 조회 가능
• 메서드를 이용 가능
• 브라우저에 데이터를 저장한다는 점에서 쿠키와 유사하지만 용량 제한이 크고 편리함

사용법

localStorage의 예를 들었지만 sessionStorage라고 바꾸면 동일하게 작동

1. 데이터 저장 : localStorage.setItem(key, value)

localStorage.setItem('name', 'RinkKim1');
localStorage.setItem('age', '31');
localStorage.setItem('email', 'abc@google.com');

// 객체 형태로 저장
const userInfo = {
  name: 'RinkKim2',
  age: 32,
  email: 'def@google.com'
};

localStorage.setItem('userInfo', JSON.stringify(userInfo));

2. 데이터 불러오기 : localStorage.getItem('key')

localStorage.getItem('name');

// 객체 형태를 불러올 때
const Data = JSON.parse(localStorage.getItem('userInfo')); 

console.log(Data) // {name: 'RinkKim2', age: 32, email: 'def@google.com'}

3. 데이터 삭제 : localStorage.getItem('key')

localStorage.removeItem('name');

---

정리

• 브라우저에 데이터를 저장 : localStorage, sessionStorage
• 메서드 : setItem, getItem, removeItem
• 저장하려는 값에 객체나 배열도 가능(변환 필요)
  저장 시 : JSON.stringify(객체나 배열))
  호출 시 : JSON.parse(localStorage.getItem('키 값'))