[22/02/08] 자바스크립트 기본 동작 막기/ Local Storage로 값 저장하기

form 의 기본 동작 = submit
a link 의 기본 동작 = link로 이동
함수에 () 작성하면 즉시 실행

event.preventDefault();

아무것도 진행되지 않음

const link = document.querySelector("a")

function handleLinkClick(event){
    event.preventDefault();
}
link.addEventListener("click",handleLinkClick)

※ String만 포함된 변수는 대문자로 표기하고 String을 저장하고 싶을 때 사용(오류를 잡기 쉽다)
const HIDDEN_CLASSNAME = "hidden"

//String과 변수를 합쳐서 사용하는 방법
    // greeting.innerHTML = "Hello" + username;
    // `백틱 ${변수명}`
    greeting.innerHTML = `Hello ${username}`; 

input에 이름을 입력하면 숨겨졌던 h1이 다시 나타나며

"Hello 이름" 이 화면에 출력

 <form id="loginForm">
            <input type="text" id="name" maxlength="15" placeholder="Input your name!" required>
            <input type="submit" value="login" >
        </form>
        <h1 id="greeting" class="hidden"></h1>

//로그인 폼
const loginForm = document.querySelector("#loginForm");
const loginInput = document.querySelector("#name");
const greeting =document.querySelector("#greeting");
const HIDDEN_CLASSNAME = "hidden" 

function onLoginSubmit(event){
    event.preventDefault();
    loginForm.classList.add(HIDDEN_CLASSNAME);
    const username = loginInput.value;
    greeting.innerHTML = `Hello ${username}`; 
  	greeting.classList.remove(HIDDEN_CLASSNAME);
}

loginForm.addEventListener("submit",onLoginSubmit)

데이터를 브라우저에 저장하는 방법

Local Storage - 가장 다루기 쉬움
Session Storage
IndexedDB
Web SQL
Cookies
TrustToken

Local Storage 사용하기

localStorage.setItem(key,value)
localStorage.getItem(key)
localStorage.removeItem(key)