고정 헤더 영역
상세 컨텐츠
본문
04. form 화면 없애고 user에게 입력받아 완성된 h1 띄우기
** 문자열 합치기
1. "string " + variableName
2. `string ${variableName}` - 반드시 백틱(``)으로 감싸야 함!
//in CSS
.hidden {
display: none;
}
=================================================
//in HTML
<body>
<form id="login-form">
<input
required
maxlength="15"
type="text"
placeholder="What is your name?" />
<input type="submit" value="Log In" />
</form>
<h1 id="greeting" class="hidden"></h1>
<script src="app.js"></script>
</body>const loginForm = document.querySelector("#login-form");
const loginInput = document.querySelector("#login-form input");
const greeting = document.querySelector("#greeting");
const HIDEEN_CLASSNAME = "hidden";
// string만 포함된 변수는 대문자로 표기함(일종의 관습)
function onLoginSubmit(event) {
event.preventDefault();
loginForm.classList.add(HIDEEN_CLASSNAME);
const username = loginInput.value;
//greeting.innerText = "Hello " + username;
greeting.innerText = `Hello ${username}`;
// `` : 백틱으로 감싸야 함!!!!
greeting.classList.remove(HIDEEN_CLASSNAME);
}
loginForm.addEventListener("submit", onLoginSubmit);
05. 입력 받은 값을 저장하기
** localStorage : 브라우저에 저장할 수 있도록 함
https://developer.mozilla.org/ko/docs/Web/API/Window/localStorage
Window.localStorage - Web API | MDN
localStorage 읽기 전용 속성을 사용하면 Document 출처의 Storage 객체에 접근할 수 있습니다. 저장한 데이터는 브라우저 세션 간에 공유됩니다. localStorage는 sessionStorage와 비슷하지만, localStorage의 데이
developer.mozilla.org
- localStorage.setItem("myCat", "Tom"); : "myCat"이란 key에 "Tom"이란 value를 저장
- localStorage.removeItem("myCat", "Tom"); : "myCat"이란 key에 "Tom"이란 value를 삭제
- const cat = localStorage.getItem("myCat"); : localStorage 항목을 읽음
→ 새로고침을 해도 더이상 value가 없어지지 않음!
<body>
// form 에 class="hidden" 추가
<form class="hidden" id="login-form">
<input
required
maxlength="15"
type="text"
placeholder="What is your name?" />
<input type="submit" value="Log In" />
</form>
<h1 id="greeting" class="hidden"></h1>
<script src="app.js"></script>
</body>const loginForm = document.querySelector("#login-form");
const loginInput = document.querySelector("#login-form input");
const greeting = document.querySelector("#greeting");
// string만 포함된 변수는 대문자로 표기함(일종의 관습)
const HIDEEN_CLASSNAME = "hidden";
const USERNAME_KEY = "username";
function onLoginSubmit(event) {
event.preventDefault();
loginForm.classList.add(HIDEEN_CLASSNAME);
const username = loginInput.value;
localStorage.setItem(USERNAME_KEY, username)
paintGreetings(savedUsername);
}
// 자주 반복되는 여러개의 코드 -> 함수로 만들어서 동작시키기
function paintGreetings(username) {
greeting.innerText = `Hello ${username}`;
greeting.classList.remove(HIDEEN_CLASSNAME);
}
const savedUsername = localStorage.getItem(USERNAME_KEY);
//console.log(savedUsername);
if(savedUsername === null) {
loginForm.classList.remove(HIDEEN_CLASSNAME);
loginForm.addEventListener("submit", onLoginSubmit);
} else {
paintGreetings(savedUsername);
}
'Java Script' 카테고리의 다른 글
| [JS]Quotes and Background_Math.random(), createElement() (0) | 2023.10.18 |
|---|---|
| [JS] Clock (0) | 2023.10.18 |
| [JS]03. Login 1 (0) | 2023.10.10 |
| [JS]02. JavaScript on the Browser 3 (0) | 2023.10.07 |
| [JS]02. JavaScript on the Browser 2 (0) | 2023.10.07 |
댓글 영역