Web Storage Object
- localStorage 와 SessionStorage 는 브라우저 내에 키-값 쌍을 저장할 수 있게 해줌.
- SessionStorage
- Session : 유저가 브라우저를 통해 웹 페이지에 접속한 시점부터, 해당 웹 페이지 접속을 종료하는 시점 까지를 의함.
- SessionStorage 를 이용하면 페이지를 새로고침을 하여도 사라지지 않고 남아 있음.
- LocalStorage
- Local 즉 도메인 자체에 데이터를 저장을 시켜 사라지지 않게함.
- LocalStorage 를 이용하면 브라우저를 끄고 새로 켜도 사라지지 않고 남아 있음
사용방법
- 먼저 데이터를 localStorage에 담는 작업이 필요함.
- localStorage.setItem()을 이용하면 로컬에 저장 할 수 있음.
- 아래와 같이 코드를 쓰게 되면 브라우저에서 확인이 가능함.
const data = "바나나";
localStorage.setItem("과일", data);
- 브라우저를 켜서 개발자 도구로 들어간 후, 어플리케이션 -> 로컬스토리지 -> 해당 도메인을 선택 하면 저장 된 것을 볼 수 있다.
- 불러오는 것도 어렵지가 않다.
- 아래와 같이 코드를 적어준다면 콘솔에 출력되는 것을 볼 수 있다.
console.log(localStorage.getItem("과일"));
