[자바스크립트] 정리4

1. localStorage는 브라우저가 제공하는 DB로 원하는 정보를 저장하고 꺼내올수 있다. 

 

Window.localStorage - Web APIs | MDN (mozilla.org) 

Window.localStorage - Web APIs | MDN

- 파이썬의 딕셔너리와 유사하다 key, value 쌍으로 저장 

- 개발자도구 - Application - Storage에서 확인가능

const username = "joon";
localStorage.setItem("username", username); // localStorage에 set, key and Value
localStorage.getItem("username"); // Key값으로 localStorage으로부터 get
localStorage.removeitem("username") // key값으로 localStorage 삭제

 

2. localStorage에 username이 존재하지 않으면 form을 존재하면 h1을 화면에 출력해보자. 

 

(1) HTML 작성시 form, h1에 hidden class를 추가하여 둘다 처음에는 안보이게 설정한다. 

(2)-1 localStorage에 username을 key로 가지는 값이 존재하는지 확인한다. (없으면 null을 반환한다.)

(2)-2 form이 submit되면 그 값을 받아와 localStorage에 key : username, value : input으로 저장한다. 

(3) 존재하지 않다면 form에서 hidden class를 삭제하고 

    존재한다면 h1에서 hidden class를 삭제한다. 

(4) 존재한다면 h1에 innerText를 추가하고 이를 화면에 출력한다. 

(5) localStorage를 비우면 다시 form을 화면에 출력한다. 

const loginInput = document.querySelector("#login-form input");
const loginForm = document.querySelector("#login-form");
const greeting = document.querySelector("#greeting");

const HIDDEN_CLASSNAME = "hidden"; // string만 포함된 변수는 대문자로 표기하는게 관습
const USERNAME_KEY = "username";

function onLoginSubmit(event){
    event.preventDefault(); 
    loginForm.classList.add(HIDDEN_CLASSNAME);
    const username = loginInput.value;
    localStorage.setItem(USERNAME_KEY, username); //localStorage에 저장

    // greeting.innerText = "Hello " + username;
    paintGreetings(username);
}

function paintGreetings(username){
    greeting.innerText = `Hello ${username}`;
    greeting.classList.remove(HIDDEN_CLASSNAME);
}

const savedUsername = localStorage.getItem(USERNAME_KEY);

if (savedUsername === null){
    loginForm.classList.remove(HIDDEN_CLASSNAME)
    loginForm.addEventListener("submit", onLoginSubmit);
} else {
    greeting.classList.remove(HIDDEN_CLASSNAME);
    paintGreetings(savedUsername);
}