Local Storage
프론트 단에서 웹 서비스를 제작할 때 마주하는 난제가 있다.
State에 값을 입력해 저장해도 새로고침을 하면 모든 데이터가 사라진다는 것이다.
하지만, 데이터베이스가 없어도 새로고침 시 입력한 값을 그대로 저장할 수 있다.
바로 Local Storage를 사용하는 방법이다.
Local Storage를 사용하면 브라우저를 닫았다 열어도 데이터가 남아있게 된다.
브라우저에서 키와 값 쌍으로 데이터를 저장하며, 유효기간 없이 데이터를 저장하고, JavaScript를 사용하거나 브라우저 캐시 또는 로컬 저장 데이터를 지워야만 사라진다.
보안의 위험이 없는 데이터를 다룰 때 사용하는 것을 추천하다.
예컨대, 토이 프로젝트로 투두리스트를 만든다고 할 때 사용이 가능하고,
특정 페이지에서 입력된 값을 다른 페이지에서 사용해야 할 때 사용이 가능할 것이다.
(💡Web Storage에는 Session Storage와 Local Storage가 있다.
sessionStorage는 각각의 출처(origin)에 대해 독립적인 저장 공간을 페이지 세션이 유지되는 동안(브라우저가 열려있는 동안) 제공한다. 즉 브라우저 또는 탭이 닫힐 때까지만 데이터를 저장한다는 점에서 Local Storage와 차이가 있다.
Web Storage API)
localStorage.setItem("key", value) //local storage로 키와 값 보내주기
localStorage.setItem("member", JSON.stringify({name:"Rosie"})) //값으로 객체 보내주기.
localStorage.getItem("key")//local storage에서 해당 키 값 가져오기
JOSN.parse(localStorage.setItem("member"))//local storage에서 객체 또는 배열 값 가져오기💡참고!💡
localStorage는 문자열 형태로 값을 저장한다.
때문에 값으로 배열이나 객체를 보내줄 때에는 JSON.stringify()를 사용해 보내주고,
값으로 저장된 배열이나 객체를 가져올 때에는 JSON.parse()를 사용해 가져온다.
JSON.stringify():json 객체를 String 객체로 변환시켜준다
JSON.parse():string 객체를 json 객체로 변환시켜준다
Local Storage에 저장된 내용은 개발자도구 > Application > Storage에서 확인이 가능하다.
