바닐라 JS) 13. local Storage에 저장하기

송민경

Sep 02, 2024

1. local Storage

웹 브라우저가 데이터를 영구적으로 저장할 수 있는 기능을 제공

사용자가 웹 사이트를 방문할 때 설정한 데이터가 브라우저에 저장

브라우저가 닫히거나 컴퓨터가 재부팅된 후에도 해당 데이터는 유지

웹 애플리케이션에서 상태나 설정을 저장하거나, 사용자의 정보를 기억하는 데 유용

영구적 저장

데이터는 브라우저를 닫거나 컴퓨터를 재부팅해도 삭제되지 않고 계속 유지

키-값 쌍 저장

데이터를 키-값 쌍으로 저장
모든 데이터는 문자열로 저장
다른 형태의 데이터(예: 객체)를 저장할 경우 JSON 형식으로 변환

브라우저 내장 기능

Local Storage는 모든 주요 브라우저에 내장되어 있어 별도의 설치가 필요하지 않음

제한된 용량

일반적으로 각 도메인 당 약 5~10MB의 데이터를 저장할 수 있음
쿠키보다 훨씬 큰 용량

동일 출처 정책

같은 도메인 내에서만 데이터에 접근할 수 있음
다른 도메인에서는 해당 데이터를 읽을 수 없음

Window: localStorage property - Web APIs | MDN

The localStorage read-only property of the window interface allows you to access a Storage object for the Document's origin; the stored data is saved across browser sessions.

https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage

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);
}

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>