- 반복되는 string은 변수로 저장
- Username을 기억해두고 새로고침해도 사라지지 않도록 저장하기
const loginForm = document.querySelector("#login-form");
const loginInput = document.querySelector("#login-form input");
const greeting = document.querySelector("#greeting");
const HIDDEN_CLASSNAME = "hidden"; //string만 포함된 변수는 대문자로 표기
const USERNAME_KEY = "username";
function onLoginSubmit(event){
const userNameType = loginInput.value;
event.preventDefault(); //새로고침되는 기본 동작을 막음
loginForm.classList.add(HIDDEN_CLASSNAME); //로그인 폼 클래스리스트에 hidden클래스 추가해서 가리기
localStorage.setItem(USERNAME_KEY,userNameType); //유저이름 저장하기
paintGreetings(userNameType); //함수호출
}
function paintGreetings(){
const username = localStorage.getItem(USERNAME_KEY); //저장된 유저이름 찾기
greeting.innerText = `Hello ${username}`; //지금 상황에서 존재하는건 savedUsername,greeting에 텍스트 추가
greeting.classList.remove(HIDDEN_CLASSNAME);
} //함수를 호출하는 위치에 따라 유저 정보는 다른 곳에서 옴
const savedUsername = localStorage.getItem(USERNAME_KEY); //키로부터 데이터 읽기
if (savedUsername === null){
// form을 표시
loginForm.classList.remove(HIDDEN_CLASSNAME); //localStorage에 유저정보가 없으면 form의 submit을 기다림
loginForm.addEventListener("submit",onLoginSubmit);
} else {
//greeting을 표시
paintGreetings(); //localStorage에 유저정보가 있으면 그곳에서 정보를 받아옴
}const loginForm = document.querySelector("#login-form");
const loginInput = document.querySelector("#login-form input");
const greeting = document.querySelector("#greeting");
const HIDDEN_CLASSNAME = "hidden"; //string만 포함된 변수는 대문자로 표기
const USERNAME_KEY = "username";
function onLoginSubmit(event){
event.preventDefault(); //새로고침되는 기본 동작을 막음
loginForm.classList.add(HIDDEN_CLASSNAME); //로그인 폼 클래스리스트에 hidden클래스 추가해서 가리기
const username = loginInput.value; //input으로부터 유저정보 받기
localStorage.setItem(USERNAME_KEY,username); //키에 데이터 쓰기
paintGreetings(username); //input에서 받은 유저정보를 가진 함수 호출
}
function paintGreetings(username){
greeting.innerText = `Hello ${username}`; //greeting에 텍스트 추가
greeting.classList.remove(HIDDEN_CLASSNAME);
} //함수를 호출하는 위치에 따라 유저 정보는 다른 곳에서 옴
const savedUsername = localStorage.getItem(USERNAME_KEY); //키로부터 데이터 읽기
if (savedUsername === null){
// form을 표시
loginForm.classList.remove(HIDDEN_CLASSNAME); //localStorage에 유저정보가 없으면 form의 submit을 기다림
loginForm.addEventListener("submit",onLoginSubmit);
} else {
//greeting을 표시
paintGreetings(savedUsername); //localStorage에 유저정보가 있으면 그곳에서 정보를 받아옴
}둘다 가능함
'JavaScript' 카테고리의 다른 글
| #5.1 Timeouts and Dates (0) | 2023.02.10 |
|---|---|
| #5.0 Intervals (2) | 2023.02.10 |
| #4.3 Events part Two (0) | 2023.02.08 |
| #4.2 Events (0) | 2023.02.06 |
| #4.1 Form Submission (1) | 2023.02.06 |