Saving the User Name

2. 유저명 저장하기 : 입력된 유저명을 저장하여 화면에 출력

<!DOCTYPE html>
<html>
<head>
    <title>Something</title>
    <link rel="stylesheet" href="index.css">
</head>
<body>
    <div class="js-clock">
        <div class="js-title">
            <h1>00:00</h1>
        </div>
    </div>
    <form class="js-form form">
        <input type="text" placeholder="What is your name?" />
    </form>
    <h4 class="js-greetings greetings"></h4>
    <script src="clock.js"></script>
    <script src="greeting.js"></script>
</body>
</html>

body {
  color: #34495e;
}

.form,
.greetings {
  display: none;
}

.showing {
  display: block;
}

const form = document.querySelector(".js-form"),
    input = form.querySelector("input"),
    greeting = document.querySelector(".js-greetings");

const USER_LS = "currentUser", //LocalStorage
    SHOWING_CN = "showing";    //ClassName

function saveName(text){
    localStorage.setItem(USER_LS, text);
}

function handleSubmit(event){
    event.preventDefault();             //event의 기본값 삭제
    const currentValue = input.value;   //value 값 가져오기
    paintGreeting(currentValue);
    saveName(currentValue);
}

function askForName(){
    form.classList.add(SHOWING_CN);
    form.addEventListener("submit", handleSubmit);
}

function paintGreeting(text){
    form.classList.remove(SHOWING_CN); //유저 등록 되어있는 상태로 form을 숨겨줘야 함
    greeting.classList.add(SHOWING_CN);
    greeting.innerText = `Hello ${text}`;
}

function loadName(){
    const currentUser = localStorage.getItem(USER_LS); //LS에서 데이터가져오기
    if(currentUser === null){
        askForName();
    } else {
        paintGreeting(currentUser);
    }
}

function init(){
    loadName();
}

init();

LocalStorage : 작은 자바스크립트 정보들로서, 유저 브라우저에 저장됨

작업관리자 - Application - Local Storage

Null : 존재하지 않음을 의미 = undefined, cannot find

function(event){}

보통 event 발생하면 root에서 일어나고 form에서 일어남
event는 일종의 거품 같은 것, 올라가면서 다른 모든 것들이 event에 반응하게 됨
즉, form을 제출하는 event가 발생하면 event가 document까지 올라감
document는 프로그램 되어진 대로 다른 곳으로 감
페이지가 새로고침 됨

→ event의 기본값(기본동작)

event.preventDefault(); : event의 기본값을 막는 메소드

paintGreeting은 text를 필요로 함
submit : 제출

PreviousMaking a JS Clock NextTo-Do List

Last updated 3 years ago

Was this helpful?

<!DOCTYPE html> <html> <head> <title>Something</title> <link rel="stylesheet" href="index.css"> </head> <body> <div class="js-clock"> <div class="js-title"> <h1>00:00</h1> </div> </div> <form class="js-form form"> <input type="text" placeholder="What is your name?" /> </form> <h4 class="js-greetings greetings"></h4> <script src="clock.js"></script> <script src="greeting.js"></script> </body> </html>