* 이 게시판은 배운 것을 간단하게 혼자 다시 짜보는 곳
목표:
바닐라자바스크립트로 localStorage 에 저장된 값을 화면에 출력
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<form class="js-form form">
<input type="text" placeholder="what is your name?">
</form>
<h4 class="js-greetings greetings"></h4>
<script src="greeting.js"></script>
</body>
</html>
javascript
const form = document.querySelector('.js-form');
const input = form.querySelector('input');
const greeting = document.querySelector('.js-greetings');
const GREETING_LS = "currentStorage";
const SHOWING_CN = "showing";
function paintText(text){
greeting.classList.add(SHOWING_CN);
greeting.innerHTML = `Hello ! ${text}`;
}
function loadName(){
// localstorage 에서 값 가져오기
const currentUser = localStorage.getItem(GREETING_LS);
if(currentUser === null){
console.log('there is no localstorage')
}else{
paintText(currentUser);
}
}
function init(){
loadName();
}
init();
리뷰 :
(1) localStorage에서 가져온 값을 pantText 함수로 보여주고, 화면에 출력.
(1-1) loadName 함수와 painText 함수의 기능을 나눠서 코딩 => 함수 기능별로 구분이 쉽고 직관적인 코드가 됨.
결과
'알고리즘 공부' 카테고리의 다른 글
| [js] 완주하지 못한 선수 (0) | 2019.12.10 |
|---|---|
| [js] K번째의 수 (0) | 2019.12.09 |
| [js] 가운데 글자 가져오기 (0) | 2019.12.09 |
| 유튜브 클론 강의 복습 (0) | 2019.12.03 |
| [js] localStorage 에 저장된 값을 화면에 출력 2 (4) | 2019.10.26 |
