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

송민경

Sep 02, 2024

Contents

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

See more posts

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

1. local Storage

2. 정보의 유무 확인하기

More articles

바닐라 JS) 15. 랜덤 명언 만들기

바닐라 JS) 14. 시계 만들기

바닐라 JS) 12. 입력받은 값 가져오기

바닐라 JS) 11. 값 입력받기