이해가안된다
그러나 한번시작한거 끝을봐야하니 몇번 돌려보고 최대한 이해한것으로 작성해봐야겠다.
코드 많음 주의
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Something</title>
<link href="index.css" rel = "stylesheet" type="text/css" />
</head>
<body>
<div class = "js-clock">
<h1 class = js-title>00:00</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>local storage를 이용하여 데이터를 저장할 계획으로 input tag를 생성
h4는 기입한 이름이 그대로 유지되기 위해 작성됨.
JavaScript
const form = document.querySelector(".js-form"),
input = form.querySelector("input"),
greeting =document.querySelector(".js-greetings");
//slelctor를 이용하여 필요 tag들을 불러왔다.
const USER_LS = "currentUser",
SHOWING_CN = "showing";
////localStorage에 저장될 key 값을 currentUser로 사용하기 위해 USER_LS 를 const로 변수설정해줌.
function saveName(text){
localStorage.setItem(USER_LS, text);
}
//localStorage 내부함수(setItem) 를 이용하여 key & value값을 내부에 저장함.
function handleSubmit(event){
event.preventDefault();
const currentValue = input.value;
paintGreeting(currentValue);
saveName(currentValue);
}
//form은 기본적으로 방울 같이 올라가서 사라져버림 (다른것에 영향을 주며 ) 근데 우리는 이걸 저장하고 싶으니까 일단 default값인 사라짐을 막기위해 event.preventDefault를 설정
//paintGreeting과 saveName은 아래에 있는 함수당.
function askForName() {
form.classList.add(SHOWING_CN);
form.addEventListener("submit", handleSubmit);
} //
function paintGreeting(text){
form.classList.remove(SHOWING_CN);
greeting.classList.add(SHOWING_CN);
greeting.innerText = `Hello ${text}`;
}
//h4태그에 이름 넣기 위해 생성한 함수. claasList의 add 와 remove를 이용함.그리고 greeting 에 해당하는 h4에 추가로 hello를 넣기위해 innerText사용
function loadName(){
const currentUser = localStorage.getItem(USER_LS);
if(currentUser === null){
askForName();
}else{
paintGreeting(currentUser); //someone
}
}
//조건문을 이용하여 localstorage에 정보가 있으면 paintgreeting함수를 발동하도록, 없으면 askForName함수를 실행하도록 만들었다.
function init(){
loadName();
}
init();
Local storgae에 저장하기 위해 what is your name 의 input 을 만든것을 볼 수 있음.
기입하여 엔터를 누르면 위 사진과 같이 local storage에 값이 저장됨.
여기서 key값과 value값이 존재하는데 이를 위해 아래 코드 사용
function saveName(text){
localStorage.setItem(USER_LS, text);
}여기서 의문이 든 점이 USER_LS 를 왜 function 안에 존재하는 currentUser와 동일 명을 썻을까인데
사실 아무의미가 없는듯, 아래의 사진과 같이 바꿔도 큰 문제가 생기지 않는다
그저 변수의 일관성 및 관리를 위해 사용한 것 같다.
이렇게하면 localstorage를 이용하여 페이지 내에 저장을 할 수 가 있다고한다.
아직도 완벽하게 이해가 되지 않아 추가로 수정을 계속해야 할 것 같다.
알고리즘 풀이를 담은 블로그입니다.