[React] localStorage 브라우저 데이터 저장

1. 개념

• localStorage는 브라우저에 제공하는 데이터 저장 메커니즘이다. 
• 클라이언트 측에서 작은 양의 데이터를 로컬 컴퓨터에 영구적으로 저장할 수 있게 해준다.
• 주로 사용자 설정, 임시 데이터 등을 저장하는데 활용한다. 
• F12(개발자 도구)  >  Application 항목 > localStorage 에서 확인 가능하다.

2. 사용방법

• localStorage.setItem(‘Key’,’Value’)  : 저장할 key값과  data를 입력하면 저장된다.
• localStorage.getItem(‘Key’)  :  출력할 key값을 입력하면 해당 데이터를 출력한다.
• localStorage.removeItem(‘Key’)  :  삭제할 데이터의 key 값을 입력하면 데이터가 삭제된다.  
• 따로 데이터를 수정하는 문법은 없다. 

3. 기타

• 기본적으로 localStorage에는 Object / Array 타입의 데이터는 저장할 수 없다. 
• 그냥 데이터를 저장하게 되면 데이터가 깨져서 저장이 되버린다.
• 따라서 저장하고자 한다면 JSON형태로 변경해야 Object / Array 타입의 데이터도 저장할 수 있다.

//Obj 데이터 선언
let obj = {name : 'Chicken'}

//JSON.stringify로 데이터를 변환해서 저장
localStorage.setItem('data', JSON.stringify(obj));

//출력하면 정상적으로 저장된것을 확인 가능
//데이터를 꺼낼 때는 JSON.parse로 반드시 데이터를 변환해서 꺼내야한다. 
let bad = localStorage.getItem('data');
console.log(JSON.parse(bad).name);