자바스크립트 (17) - 저장하기. 로컬스토리지

이제 밸류 저장을 배운다.

 

유저의 이름이든 뭐든, 뭔가를 저장하는 것은 매우 중요하다.

예를들어 유튜브에서 우리가 볼륨을 조절하고 새로고침하면 플레이어가 볼륨값을 기억하고 있다.

 

전에도 말했듯이 클래스 네임을 추가하고 삭제하는 등 개발자가 자주하는 작업들은 이미 api가 존재한다.

콘솔에 로컬 스토리지를 입력하면 이미 정의가 되어 있다.

 

개발자 도구에 들어가 화살표모양을 클릭하고 application으로 들어가면 로컬 스토리지를 발견할 수 있다.

 

세션스토리지, 인덱스트 디비, 웹sql,쿠키등도 있는데, 우리는 로컬 스토리지를 다뤄본다. 이 모든것들이 다 정보를 저장할 수 있지만,

그중에 로컬 스토리지가 다루기 가장 쉽다.

 

그냥 작은 디비같은 것이며 키밸류만 있으면된다.

 

아직 로컬 스토리지에 아무것도 없으나,

저장하기 시작하면 생길 것이다.

 

로컬스토리지 api를 mdn에서 보면 많은 메소드가 나오는데,

 

셋, 겟 , 리무브 메소드가 가장 중요하다.

 

-셋

localStorage.setItem(“username”, “nico”)

첫번쨰 인자로는 저장할 장소의 값. 그 다음에는 저장할 값을 넣는다. 콘솔에 입력하고 로컬스토리지를 확인해보면 db에 키값과 밸류값이 저장돼 있다.

 

-겟

localStorage.getItem(“username”)

 

-리무브

localStorage.removeItem(“username”)

 

겟아이템 메소드를 사용했으나 만약 유저네임이 존재하지 않는다면 null값을 반환한다.

 

이것을 이용해 유저이름이 널이라면, 폼이 생성되게 구현할 것이다.

 

const savedUsername = localStorage.getItem(“username”);

만약 널이라면

 

if (savedUsername === null) {

//폼보여주기

} else {

  //그리팅 보여주기.

}