1. Web Storage
Web Storage에는 localStorage와 session storage가 존재한다.
이 두개의 메커니즘의 차이점은 데이터가 어떤 범위내에서 얼마나 오래 보존되는가의 차이인데 session storage는 웹페이지의 세션이 끝날 때 까지 저장된 데이터가 지워지는 반면 localStorage는 웹페이지의 세션이 끝나더라도 데이터가 지워지지 않는다.
하지만 어찌되었던 localStorage와 sessionStorage 모두 데이터를 브라우저 상에 저장한다는 것은 같으며 자바스크립트 API가 완전히 동일한 형태이다.
2. preventDefalut()
HTML에서 태그는 고유의 동작이 있다. 예를들면 form 태그안에 있는 input 을 전송한다던가 그러한 동작이 있는데
preventDefault()는 그 동작을 중단시킨다.
다음 예제코드는 form태그의 기본동작인 submit 을 handlesubmit이라는 커스텀 함수안에서 preventDefalut()를 적용한뒤 원하는 동작을 수행하도록 한다.
원하는 동작은 input 태그에 입력된 데이터를 localStorage에 저장한 뒤 저장된 값 앞에 hello를 덧붙여서
<h4> 태그에 출력하도록 한다.
-예제코드
1. HTML 작성부분
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
<!DOCTYPE html>
<html lang="en">
<head>
<title>Something</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class = "js-clock">
<h1>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="gretting.js"></script>
</html>
|
cs |
2. CSS 작성부분
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
body {
background-color: peru;
}
h1 {
color: white;
}
.form,
.greetings {
display: none;
}
.showing {
display: block;
}
|
cs |
3. JS 작성부분
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
|
const form = document.querySelector(".js-form"),
input = form.querySelector("input"),
greeting = document.querySelector(".js-greetings");
const USER_LS = "currentUser",
SHOWING_CN = "showing";
function saveName(text) {
localStorage.setItem(USER_LS, text);
}
function handleSubmit(event) {
event.preventDefault();
const currentValue = input.value;
paintingGreeting(currentValue);
saveName(currentValue);
}
function askFroName() {
form.classList.add(SHOWING_CN);
form.addEventListener("submit", handleSubmit);
}
function paintingGreeting(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) {
askFroName();
} else {
paintingGreeting(currentUser);
}
}
function init() {}
loadName();
init();
|
cs |
'JavaScript' 카테고리의 다른 글
| JS - toggle (0) | 2021.11.20 |
|---|---|
| JS - Event listener (0) | 2021.11.16 |
| JS - 자바스크립트 시간출력 (0) | 2021.04.04 |
| JS : JavaScript DOM 객체란? (0) | 2021.04.03 |
| JS - 자바스크립트의 데이터 타입 (0) | 2021.04.03 |