1. local Storage
- 웹 브라우저가 데이터를 영구적으로 저장할 수 있는 기능을 제공
- 사용자가 웹 사이트를 방문할 때 설정한 데이터가 브라우저에 저장
- 브라우저가 닫히거나 컴퓨터가 재부팅된 후에도 해당 데이터는 유지
- 웹 애플리케이션에서 상태나 설정을 저장하거나, 사용자의 정보를 기억하는 데 유용
- 영구적 저장
- 데이터는 브라우저를 닫거나 컴퓨터를 재부팅해도 삭제되지 않고 계속 유지
- 키-값 쌍 저장
- 데이터를 키-값 쌍으로 저장
- 모든 데이터는 문자열로 저장
- 다른 형태의 데이터(예: 객체)를 저장할 경우 JSON 형식으로 변환
- 브라우저 내장 기능
- Local Storage는 모든 주요 브라우저에 내장되어 있어 별도의 설치가 필요하지 않음
- 제한된 용량
- 일반적으로 각 도메인 당 약 5~10MB의 데이터를 저장할 수 있음
- 쿠키보다 훨씬 큰 용량
- 동일 출처 정책
- 같은 도메인 내에서만 데이터에 접근할 수 있음
- 다른 도메인에서는 해당 데이터를 읽을 수 없음
- console창에서 먼저 확인해보기
localStorage.setItem("키", "값") // 저장하기
localStorage.getItem("키") // 가져오기
localStorage.removeItem("키") // 지우기
- input 태그에 입력된 값을 localStorage에 저장하기
const loginForm = document.querySelector("#login-form");
const loginInput = document.querySelector("#login-form input");
const freeting =- document.querySelector("#greeting");
const HIDDEN_CLASSNAME = "hidden";
function onLoginSubmit(event) {
event.preventDefault(); // 새로고침 방지
loginForm.classList.add(HIDDEN_CLASSNAME); // 폼 숨기기
const username = loginInput.value; // loginInput에 값을 변수에 저장하기
localStorage.setItem("username", username); // 키와 값의 쌍으로 저장하기
greeting.innerText = `Hello ${username}`; //저장된 값을 변수 값에 넣기
greeting.classList.remove(HIDDEN_CLASSNAME); // hidden 클래스명 없애기
}
loginForm.addEventListener("submit",onLoginSubmit);
2. 정보의 유무 확인하기
localStorage.getItem("키")const loginForm = document.querySelector("#login-form");
const loginInput = document.querySelector("#login-form input");
const freeting =- document.querySelector("#greeting");
const HIDDEN_CLASSNAME = "hidden";
function onLoginSubmit(event) {
event.preventDefault(); // 새로고침 방지
loginForm.classList.add(HIDDEN_CLASSNAME); // 폼 숨기기
const username = loginInput.value; // loginInput에 값을 변수에 저장하기
localStorage.setItem("username", username); // 키와 값의 쌍으로 저장하기
greeting.innerText = `Hello ${username}`; //저장된 값을 변수 값에 넣기
greeting.classList.remove(HIDDEN_CLASSNAME); // hidden 클래스명 없애기
}
loginForm.addEventListener("submit",onLoginSubmit);
const saveUsername = localStorage.getItem("username");
console.log(saveUsername);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
</head>
<body>
<form class="login-form hidden" id="login-form">
<input
required
maxlength="15"
type="text"
placeholder="What is your name?" /> <!--사용자로부터 값 입력받기-->
</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 freeting =- document.querySelector("#greeting");
const HIDDEN_CLASSNAME = "hidden";
const USERNAME_KEY = "username";
function onLoginSubmit(event) {
event.preventDefault(); // 새로고침 방지
loginForm.classList.add(HIDDEN_CLASSNAME); // 폼 숨기기
const username = loginInput.value; // loginInput에 값을 변수에 저장하기
localStorage.setItem(USERNAME_KEY, username); // 키와 값의 쌍으로 저장하기
greeting.innerText = `Hello ${username}`; //저장된 값을 변수 값에 넣기
greeting.classList.remove(HIDDEN_CLASSNAME); // hidden 클래스명 없애기
}
const saveUsername = localStorage.getItem(USERNAME_KEY);
if(saveUsername === null) {
loginForm.classList.remove(HIDDEN_CLASSNAME);
loginForm.addEventListener("submit",onLoginSubmit);
} else {
loginForm.classList.add(HIDDEN_CLASSNAME); // 폼 숨기기
greeting.innerText = `Hello ${username}`; //저장된 값을 변수 값에 넣기
greeting.classList.remove(HIDDEN_CLASSNAME); // hidden 클래스명 없애기
}
const loginForm = document.querySelector("#login-form");
const loginInput = document.querySelector("#login-form input");
const freeting =- document.querySelector("#greeting");
const HIDDEN_CLASSNAME = "hidden";
const USERNAME_KEY = "username";
function onLoginSubmit(event) {
event.preventDefault(); // 새로고침 방지
loginForm.classList.add(HIDDEN_CLASSNAME); // 폼 숨기기
const username = loginInput.value; // loginInput에 값을 변수에 저장하기
localStorage.setItem(USERNAME_KEY, username); // 키와 값의 쌍으로 저장하기
paintGreetings(saveUsername);
}
function paintGreetings(username) {
greeting.innerText = `Hello ${username}`; //저장된 값을 변수 값에 넣기
greeting.classList.remove(HIDDEN_CLASSNAME); // hidden 클래스명 없애기
}
const saveUsername = localStorage.getItem(USERNAME_KEY);
if(saveUsername === null) {
loginForm.classList.remove(HIDDEN_CLASSNAME);
loginForm.addEventListener("submit",onLoginSubmit);
} else {
paintGreetings(saveUsername);
}
Share article
