Javascript에서 Form과 Local Storage 사용하기

rakkoon23·2020년 4월 18일
0

노마드코더-Vanilla JS

목록 보기
12/16

노마드 코더님의 자바스크립트 강의를 보고 정리한 글입니다.

index.html

<!DOCTYPE html>
<html>
    <head>
        <title>Something</title>
        <link rel="stylesheet" href="index.css" />
    </head>
    <body>
        <div class="js-clock">
            <h1></h1>
        </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>

index.css

.form, .greetings {
    display:none;
}

.shwoing {
    display: block;
}

greeting.js

  • querySelector는 조건에 맞는 첫 번째 selector를 가져오고
  • querySelectorAll은 조건에 맞는 모든 selector를 가져온다. 단, 리턴값이 Array이다.
  • local storage : 자바스크립트 정보가 유저 컴퓨터에 저장된 곳.
    • 크롬 개발자 도구 > Application 탭 > Storage > Local Storage를 보면 무언가 저장되어 있는 것을 확인할 수 있다.
    • localStorage.setItem("Phillip", true); : Key가 "Phillip"이고 value가 true인 데이터를 저장.
    • localStorage.getItem("Phillip"); : key의 value를 찾아 리턴한다. 여기서 리턴값은 true이다.
const form = document.querySelector(".js-form"),
input = form.querySelector("input"),
greeting = document.querySelector(".js-greetings");

const USER_LOCAL_STORAGE = "currentUser",
SHOWING_CLASS_NAME = "showing";

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

function handleSubmit(event){
    event.preventDefualt();
    const currentValue = input.value;
    paintGreeting(currentValue);
    saveName(currentValue);
}

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

function paintGreeting(text){
    // 유저 이름을 보여줄거면, 폼을 display:none처리
    form.classList.remove(SHOWING_CLASS_NAME);
    greeting.classList.add(SHOWING_CLASS_NAME);
    greeting.innerText = `Hello ${text}`;
}

// local storage에 유저이름이 있으면, 불러와서 서식에 맞게 출력.
function loadName(){
    const currentUser = localStorage.getItem(USER_LOCAL_STORAGE);
    if (currentUser === null){
        askForName();
    } else {
        paintGreeting(currentUser);
    }
}

function init(){
    loadName();
}
init();
profile
모빌리티 스타트업에서 데이터를 다루고 있습니다.

0개의 댓글