2022. 1. 11. 02:08ㆍVanilla JS
출처 : https://nomadcoders.co/javascript-for-beginners/lobby
Watch Now – 노마드 코더 Nomad Coders
nomadcoders.co
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Momentum</title>
</head>
<body>
<form id="login-form" class="hidden">
<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>
app.js
const loginForm = document.querySelector("#login-form")
const loginInput = document.querySelector("#login-form input")
const greeting = document.querySelector("#greeting");
const HIDDEN_CLASSNAME = "hidden";
const USERNAME_KEY = "username"
onLoginSubmit = (event) => {
event.preventDefault(); //브라우저의 기본 동작을 막는 함수.
let username = loginInput.value;
loginForm.classList.add(HIDDEN_CLASSNAME);
localStorage.setItem(USERNAME_KEY, username); // 웹브라우저에서 기본적으로 제공해주는 미니 DB 같은것.
paintGreetings(username);
}
paintGreetings = (username) => {
greeting.classList.remove(HIDDEN_CLASSNAME) ;
greeting.innerText = `Hello ${username}`;
}
loginForm.addEventListener("submit", onLoginSubmit)
const savedUserName = localStorage.getItem(USERNAME_KEY);
if(savedUserName === null){
loginForm.classList.remove(HIDDEN_CLASSNAME);
loginForm.addEventListener("submit", onLoginSubmit)
}else{
paintGreetings(savedUserName);
}
관련정보 : https://developer.mozilla.org/ko/docs/Web/API/Window/localStorage
Window.localStorage - Web API | MDN
localStorage 읽기 전용 속성을 사용하면 Document 출처의 Storage 객체에 접근할 수 있습니다. 저장한 데이터는 브라우저 세션 간에 공유됩니다.
developer.mozilla.org
1. LocalStorage의 특징
- 저장한 데이터를 삭제하지 않는 이상 영구적 보관 가능. 브라우저를 종료해도 데이터 보관.
- 서버에 클라이언트에 대한 데이터를 저장하지 않음.
2. LocalStorage 와 비슷한 SessionStorage
- LocalStorage와 동일한 특징을 갖지만, 세션이 종료되면(브라우저를 닫게되면) 클라이언트에 대한 정보 삭제.
LocalStorage와 SessionStorage를 묶어 WebStorage 라 칭함.
3. LocalStorage / SessionStorage vs Cookie
- LocalStorage와 SessionStorage의 장점 : 서버에 불필요한 데이터 저장 안함. 저장 용량이 큼
- LocalStorage와 SessionStorage의 단점 : HTML4만 지원되는 브라우저에서는 사용 불가. 지원 안됨.
- Cookie의 장점 : 거의 모든 브라우저 지원.
- Cookie의 단점 : API가 한번 더 호출되므로 서버 부담증가, 용량 작음.
localStorage 사용시, 인터넷 개발자옵션의 Application - Local Storage 에서 확인 가능.
웹에서 제공하는 미니 DB 라는 느낌으로 사용가능이라고 한다.
검색해서 찾아보니 생각보다 내용이 방대하다.
Cookie 참고자료 : https://okayoon.tistory.com/entry/%EC%BF%A0%ED%82%A4Cookie
쿠키(Cookie)
쿠키(Cookie) 클라이언트 로컬(하드)에 저장되는 key, value값이 들어 있는 데이터 파일이다. 서버에 저장되는 것이 아니기 때문에 보안과 상관없는 정보들에 사용한다. 재 요청 시 저장된 값을 참조
okayoon.tistory.com
Cookie & LocalStorage & SessionStorage 참고자료 : https://okayoon.tistory.com/entry/%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80-%EC%BF%A0%ED%82%A4Cookie-%EC%84%B8%EC%85%98%EC%8A%A4%ED%86%A0%EB%A6%AC%EC%A7%80Session-Storage-%EB%A1%9C%EC%BB%AC%EC%8A%A4%ED%86%A0%EB%A6%AC%EC%A7%80Local-Storage
브라우저 쿠키(Cookie), 세션스토리지(Session Storage), 로컬스토리지(Local Storage)
요약 데이터베이스를 사용하지 않고 데이터를 임시적인 용도로 저장 할 때 사용하는 것 대부분의 데이터는 데이터베이스에 저장하고 해당하는 사용처에 따라 쿠키, 세션스토리지, 로컬스토
okayoon.tistory.com
'Vanilla JS' 카테고리의 다른 글
| Javascript의 sort에 대해 알아보자. (0) | 2023.08.30 |
|---|---|
| parseInt()와 '+' 연산자의 차이 (0) | 2023.07.18 |
| [Vanilla JS] - 4. 배열의 특정 값 삭제하기. (0) | 2022.01.14 |
| [Vanilla JS] - 3. parentNode vs parentElement (0) | 2022.01.13 |
| [Vanilla JS] - 2. 원하는 문자 앞뒤로 채워넣기 - padStart() , padEnd() (0) | 2022.01.12 |