1. localStorage 객체
👾 웹 브라우저에 데이터를 저장하는 객체
👾 localStorage 객체 처럼 웹 브라우저가 제공해주는 기능을 웹 API 라고 부른다.
| 메소드 | 설명 |
| localStorage.getItem(키) | 저장된 값을 추출. 없으면 'null' 이 반환 |
| localStorage.setItem(키, 값) | 값을 저장 |
| localStorage.removeItem(키) | 특정 키의 값을 제거 |
| localSorage.clear() | 저장된 모든 값을 제거 |
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
.hidden {
display: none;
}
</style>
<body>
<form id="login-form"> <!-- input 유효성 검사 작동 위해 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>
</html>
const loginForm = document.querySelector('#login-form');
const loginInput = document.querySelector('#login-form input');
const greeting = document.querySelector("#greeting");
const HIDDEN_CLASSNAME = "hidden";
const USERNAME_KYE = 'userName';
function onLoginSubmit(event) { // 방금 일어난 event에 대한 정보를 지닌 argument를 채워넣음
// form을 submit 하면 브라우저는 기본적으로 페이지를 새로고침 함
event.preventDefault(); // 브라우저 기본 동작 막음 (새로고침 x)
const userName = loginInput.value; // 입력받은 값 변수에 저장
loginForm.classList.add(HIDDEN_CLASSNAME); // 입력받은 후 폼 형태 숨기기
localStorage.setItem(USERNAME_KYE, userName); // (키,값) 형태로 저장
paintGreetings(userName); // h1 태그 안의 텍스트 불러옴
}
function paintGreetings (userName) { // h1 태그 안의 텍스트 불러오는 함수
greeting.innerText = `Hello ${userName}`;
greeting.classList.remove(HIDDEN_CLASSNAME); // 인사말 숨기는 속성 제거
}
const savedUsername = localStorage.getItem(USERNAME_KYE);
if (savedUsername === null) { // 이름이 저장되어 있지 않을 떄
loginForm.classList.remove(HIDDEN_CLASSNAME); // 로그인 폼 숨기는 속성 제거
loginForm.addEventListener('submit', onLoginSubmit);
} else { // 이름이 저장되어 있을 떄
paintGreetings(savedUsername);
}
웹 API 관련 참고 사이트
https://developer.mozilla.org/ko/docs/Web/API
Web API | MDN
웹 코드를 작성한다면 많은 API를 사용할 수 있습니다. 아래 목록은 웹 앱이나 웹 사이트를 만들 때 사용할 수 있는 모든 인터페이스(객체의 유형)입니다.
developer.mozilla.org
[ 내용 참고 : 책 '혼자 공부하는 자바스크립트' 및 노마드 코더 강의 ]
'Programming Language > JavaScript' 카테고리의 다른 글
| [JavaScript] Ajax 이용해 버스 노선과 항공 출도착 정보 가져오기 (0) | 2024.04.13 |
|---|---|
| [JavaScript] Ajax, JSON (0) | 2024.04.13 |
| [JavaScript] 회원가입 예제 (0) | 2024.04.05 |
| [JavaScript] 주문서 작성 (0) | 2024.04.05 |
| [JavaScript] 드롭다운 목록, 체크박스, 라디오 버튼, 기본 이벤트 막기, 참가신청 명단 (0) | 2024.04.05 |
