[노마드코더]바닐라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에 저장한다.
저장한 username을 가져와보자.
#21 에서 localStorage에서 설정한 username을 가져와서 savedUsername에 저장할 수 있다.
#5~#6 은 개발자의 raw value로 인한 오타를 방지하기 위해서 hidden, username을 variable로 선언했다.
login-form이 숨겨진 다음 greeting을 하는 코드가 반복되기 때문에 #16~#19 에서 function으로 정의했다.
