[노마드코더]바닐라JS로 크롬 앱 만들기 (26)DB 같은 Local Storage에 값 저장하기

username을 받아서 저장해보자.

 

브라우저에서 value를 저장할 수 있는 쉬운 방법 중 하나가 local storage API를 이용하는 것이다.

local storage는 setItem, getItem, removeItem을 통해서 접근할 수 있다.

console 창에서 local storage에 값을 넣거나 가져올 수 있다.

setItem(key, value) : local storage에 key-value를 저장한다.

getItem(key) : local storage에서 key에 해당하는 value를 가져온다.

removeItem(key) : local storage에서 key에 해당하는 key-value를 삭제한다.

local storage는 Application - Storage - Local Storage에서 확인할 수 있다.

 

console 창에서 사용하던 방법을 그대로 app.js에 적용하면, Javascript에서도 local storage를 사용할 수 있다.

#10 에서 username을 loginInput.value로 받아서

#11 에서 localStorage.setItem으로 브라우저의 local storage에 저장한다.

local storage에 username-nico 형태로 저장되어 있다

 

저장한 username을 가져와보자.

#21 에서 localStorage에서 설정한 username을 가져와서 savedUsername에 저장할 수 있다.

#5~#6 은 개발자의 raw value로 인한 오타를 방지하기 위해서 hidden, username을 variable로 선언했다.

login-form이 숨겨진 다음 greeting을 하는 코드가 반복되기 때문에 #16~#19 에서 function으로 정의했다.