(ToDoList) #사용자의 이름을 입력받고 저장하기

- 만들고 싶은 기능 : 사용자가 이름을 입력하면, 입력값을 저장한 후, 반기는 멘트를 띄우기

*단, 입력 후에 새로고침해도 반기는 멘트가 유지되어야한다.

원하는 결과 예시

 

1. HTML

<form id="login-form" class="hidden">
	<input
    required
    maxlength="15"
    type="text"
    placeholder="What is your Name?">
    <button>Log in</button>
</form>

<h1 id="greeting" class="hidden"></h1>

입력받는 폼태그와 입력 이후에 띄울 수 있는 greeting h1 태그가 있다.

 

2. CSS

.hidden{
	display: none;
}

 

3. JavaScript

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


//////////////////////////////////////////
// 먼저 홈페이지에 방문 시, 사용자에게 이름값을 받는다.
//////////////////////////////////////////

function onLoginSubmit(event){
	// 폼이 자동적으로 전송돼서 새로고침 되는 것을 방지
	event.preventDefault();
    
    // form이 숨겨지게 만든다.
    loginForm.classList.add('hidden');
    
    // 사용자에게 받은 이름을 localStorage에 저장한다.
    const username = loginInput.value;
    localStorage.setItem('username', username);
    
    // greeting 사인을 보여준다.
    paintGreetings(username);
}


/////////////////////////////
// greeting 반기는 함수 (h1태그)
/////////////////////////////

function paintGreeting(username){

	// 반기는 문구를 h1태그에 설정한다.
    greeting.innerText = `Hello ${username}`;
    // greeting 에 hidden 클래스를 없애 띄운다.
	greeting.classList.remove('hidden');
}


////////////////////////////
//새로고침시, 이름이 저장되어있다면?
////////////////////////////


// localstorage에 저장 안되어있으면 입력값을 다시 받고, 아니면 greeting 페이지 보여주기.

const saveUsername = localStorage.getItem('username');
if (saveUsername === null){
	loginForm.classList.remove('hidden')
} else {
	paintGreeting(saveUsername);
}

 

그다음, hidden과 username이라는 문자열이 반복됨으로 변수로 넣어줘서 표현할 수 있다.

아래는 변수로 넣어 표현하였다.

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


const USERNAME_KEY = "username";
const HIDDEN_CLASSNAME = "hidden";


//////////////////////////////////////////
// 먼저 홈페이지에 방문 시, 사용자에게 이름값을 받는다.
//////////////////////////////////////////

function onLoginSubmit(event){
	// 폼이 자동적으로 전송돼서 새로고침 되는 것을 방지
	event.preventDefault();
    
    // form이 숨겨지게 만든다.
    loginForm.classList.add(HIDDEN_CLASSNAME);
    
    // 사용자에게 받은 이름을 localStorage에 저장한다.
    const username = loginInput.value;
    localStorage.setItem(USERNAME_KEY, username);
    
    // greeting 사인을 보여준다.
    paintGreetings(username);
}


/////////////////////////////
// greeting 반기는 함수 (h1태그)
/////////////////////////////

function paintGreeting(username){

	// 반기는 문구를 h1태그에 설정한다.
    greeting.innerText = `Hello ${username}`;
    // greeting 에 hidden 클래스를 없애 띄운다.
	greeting.classList.remove(HIDDEN_CLASSNAME);
}


////////////////////////////
//새로고침시, 이름이 저장되어있다면?
////////////////////////////


// localstorage에 저장 안되어있으면 입력값을 다시 받고, 아니면 greeting 페이지 보여주기.

const saveUsername = localStorage.getItem(USERNAME_KEY);
if (saveUsername === null){
	loginForm.classList.remove(HIDDEN_CLASSNAME)
} else {
	paintGreeting(saveUsername);
}