[JS]2021-1107 localStorage로 사용자 정보 저장

nomadcoders VanilaJS #4.3~7 강의를 정리한 내용입니다.

localStorage

브라우저 상에 데이터를 저장할 수 있는 웹 스토리지 api로, key와 이에 대응하는 value를 가진다.

localStorage는 key에 대응하는 value값 찾기 혹은 삭제하기 등 여러 method가 있는데, 예를 들어

localStorage.getItem("key");

이런 식으로 사용하면, "key"라는 key값에 대응하는 value를 return 해주며, key와 value는 항상 string이다.

만약 해당하는 데이터가 없다면 null 값을 반환받는다.

 

참고로 Web Storage에는 localStorage와 sessionStorage 두 가지가 있다.

localStorage는 웹페이지의 세션이 끝나도 지속되는 반면, sessionStorage는 웹페이지의 세션이 끝나면 데이터도 함께 사라진다.

localStorage에 value 저장하기

사용자가 입력한 정보를 브라우저가 기억해, 새로고침을 해도 변경되지 않는 인사말을 만들고자 한다.

이때 사용한 것이 localStorage이며, 정보를 저장하는 방법은 아래와 같다.

const loginInput = document.querySelector("#login-form input");

function onLoginSubmit(event) {
const username = loginInput.value;
localStorage.setItem("username", username);
}

querySelector로 찾은 로그인 폼의 input을 loginInput이라는 전역 변수로 선언한다.

사용자가 submit을 하면 loginInput의 value값이 username이라는 지역변수에 담기고,

이 값은 "username"이라는 key값에 담기게 된다.