웹 스토리지
- 로컬 스토리지 => 웹페이지의 세션이 끝나더라도 데이터가 지워지지 않음
- 세션 스토리지 => 웹페이지의 세션이 끝날 때 저장된 데이터가 지워짐
input태그에 입력한 이름을 localStorage에 저장해보려 합니다
<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
<title>localStorage</title>
<link rel="stylesheet" href="index.css" />
</head>
<body>
<form class="js-form from">
<input type="text" placeholder="What is your name?" />
</form>
<h4 class ="js-greetings greetings"></h4>
</script>
<script src="greeting.js"></script>
</body>
</html>
greeting.js에서 작업을 하려고 합니다. 호출해줍니다.
// greeting.js
const form = document.querySelector(".js-form");
const input = form.querySelector("input");
const greeting = document.querySelector(".js-greetings");
const USER_LS = "currentUser";
const SHOWING_CN = "showing";
function saveName(text) {
localStorage.setItem(USER_LS, text);
}
function handleSubmit(event) {
event.preventDefault();
const currentValue = input.value;
paintGreeting(currentValue);
saveName(currentValue);
}
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}`;
}
function loadName() {
const currentUser = localStorage.getItem(USER_LS);
if (currentUser === null) {
askForName();
} else {
paintGreeting(currentUser);
}
}
function init() {
loadName();
}
init();
form에 js-form태그를 넣습니다.
input에 js-form태그 안의 input태그를 넣습니다.
greeting에 js-greeting태그를 넣습니다.
USER_LS는 사용자가 입력한 이름을 저장하는 변수명을 상수로 가지고 있습니다.
SHOWING_CN는 클래스 이름 showing을 상수로 가지고 있습니다.
-- 함수 --
loadName
localStorage에 이름이 있는지 확인
없을 경우 askForName 함수 호출
있을 경우 paintGreeting 함수 호출
askForName
form의 클래스에 SHOWING_CN을 추가하여서 해당 form을 보이게 함
form의 submit에 handleSubmit 함수를 연결
handleSubmit
submit 이벤트를 제거
currentValue에 입력한 값을 대입
paintGreeting함수 호출
saveName함수 호출
paintGreeting
form을 숨김
greeting을 보이게 함
greeting에 "Hello " + {입력한 값}을 text로 넣음
saveName
localStorage에 USER_LS에 입력값을 저장
/* index.css */
body {
background-color: peru;
}
.form greetings {
display: none;
}
.form {
text-align: center;
}
input {
font-size: 30px;
}
h4 {
text-align: center;
color: white;
font-size: 40px;
}
.showing {
display: block;
}
localStorage는 f12(개발자 도구) - Application - Storage - Local Storage에서 확인이 가능합니다.
J3SUNG입력 - localStorage에 저장 된것을 확인 가능
새로고침(세션 만료) - localStorage가 여전히 저장되어 있음.
'JavaScript' 카테고리의 다른 글
| [JavaScript] 배경이미지 설정 (0) | 2020.12.23 |
|---|---|
| [JavaScript] to do list 만들기 (localStorage) (2) | 2020.12.23 |
| [JavaScript] 실시간 시간 표시 (0) | 2020.12.22 |
| [JavaScript] 이벤트 (0) | 2020.12.18 |
| [JavaScript] document 객체 (0) | 2020.12.18 |