JavaScript_크롬 앱 만들기

1. LogIn_2

4) submit하면 로그인 화면이 사라져야함

//index.html

<h1 id="greeting" class="hidden"></h1>
<script src="app.js"></script>

// app.js

const greeting = document.getElementById("greeting");
const HIDDEN_CLASSNAME = "hidden"

function onLogInSubmit(event){      
    event.preventDefault();         // 기본 동작을 하지 못하게 함 / 보통 event argument를 사용함
    loginForm.classList.add(HIDDEN_CLASSNAME);	// loginForm에 "hidden"클래스를 추가함 
    const username = loginInput.value;
    greeting.innerHTML = `Hello ${username}`;    // 백틱은 option + ₩(한글 일때) / ₩(영문일 때)
    greeting.classList.remove(HIDDEN_CLASSNAME); // h1에 있던 "hidden"클래스를 제거함
}

loginForm.addEventListener("submit",onLogInSubmit);

// style.css 

.hidden{
	display : none;
}

5) saving username

value 값을 기억해야함
ex) who is user? (한번 로그인하면 user가 누군지 기억하고 새로고침 했을 때 h1페이지가 나오도록 해야함)

localStorage에 저장!
-> localStorage: 우리가 브라우저에서 뭔가를 저장할 수 있게 함
-> Application에서 확인 할 수 있음

1. setItem : localStorage에 정보를 저장할 수 있게 함

localStorage.setItem("key","value");
//ex) localStroge.setItem("username","eunseo");

2. getItem : localStorage의 정보를 빼올 수 있게 함

const username = localStorage.getitem("key");
// "key"의 value를 가져옴
// ex) const username = localStorage.getItem("username");

3. removeItem : localStorage에 저장된 value값을 제거함

localStorage.remove("key");
// ex) localStorage.remove("username");

--> but, 아직까지는 새로고침을 하면 form이 보임 (수정 필요!)
--> value 값이 있으면 h1 페이지가 보이고, value 값이 없으면 form이 보일 수 있게 해야함

6) Loading username

localStorage가 비어있으면 submit 할 수 있게 확인필요!
-> localStorage === null인지 확인하기

function onLogInSubmit(event){      // submit을 할 때 새로고침을 하지 않게 해줌
    event.preventDefault();                 // 기본 동작을 하지 못하게 함
    loginForm.classList.add(HIDDEN_CLASSNAME);
    const username = loginInput.value;
    localStorage.setItem(USERNAME_KEY,username);
    paintGreetings(username);                               // 사용자가 입력한 username 값을 사용
}

function paintGreetings(username){
    greeting.innerHTML = `Hello ${username}`;       // 백틱은 option + ₩(한글 일때) / ₩(영문일 때)
    greeting.classList.remove(HIDDEN_CLASSNAME);
    // greeting의 hidden class를 제거함(display가 보일 수 있도록)
}

if(savedUsername === null){
    // show the form
    loginForm.classList.remove(HIDDEN_CLASSNAME); 
    loginForm.addEventListener("submit",onLogInSubmit);
}else{
    // show the greetings
    paintGreetings(savedUsername);                          // localStorage 에 있는 인자를 사용
}