[React] localStorage 데이터 저장하기

크롬 기준
개발자 도구(F12) - Application 탭 - LocalStorage 에 저장

Local Storage VS Session Storage?

Local Storage - 데이터를 따로 삭제하지 않는 이상 사라지지 않음.
Session Storage - 윈도우나 브라우저 탭을 닫으면 삭제됨.

Local Storage는 키(key) - 값(value) 형식이며, 어떠한 값을 저장해도 모두 문자열로 변환.

localStorage.setItem('name', 'mike'); 
// localStorage.setItem(키, 값) 저장

localStorage.setItem('age', 25);
// localStorage.setItem(키, 값) 저장

localStorage.getItem('name'); 
// localStorage.getItem(키) 조회 -> mike

localStorage.getItem('age'); 
// localStorage.getItem(키) 조회 -> 25 (문자열)

localStorage.removeItem('age');
// localStorage.removeItem(키) 삭제

localStorage.getItem('age'); 
// null (삭제됨)

localStorage.clear(); 
// localStorage 전체 삭제


localStorage.setItem('object', JSON.stringify({ a: 'b' }));
// 객체 저장할때 JSON.stringify 사용
JSON.parse(localStorage.getItem('object'));
// 객체 그대로 문자열로 조회 -> { a: 'b' } (문자열)