#3-3 Saving the User Name 2

localStorage.setItem() 으로 key와 value를 각각 추가할 수 있다.

 

저장된 값을 가져올 때는 localStorage.getItem()을 사용한다.

---

form, greeting class는 css에서 다루기 위해서 추가한 class

---

새로고침을 하면 화면에 입력한 User정보가 리셋되는걸 막기위해 localStorage에 정보가 저장되어 있으면,

그 값을 paintGreeting 함수를 통해서 화면에 출력해줄것이다.

 

const form = document.querySelector(".js-form"),
    input = form.querySelector("input"), //form이 input의 부모이므로 . 붙이지 않고 가져옴
    greeting = document.querySelector(".js-greeting");

const USER_LS = "currentUser";

function paintGreeting(text){
    greeting.innerText = `Hello! ${text}`;
}

function loadName() {
    const currentUser = localStorage.getItem(USER_LS);
    if(currentUser === null){
        //currentUser is undefined
    }
    else {
        //currentUser is defined
    }
}

function init(){
    loadName();
}

init();

 

배지

추가할때 

localStorage.setItem('myCat', 'Tom');

위에서 추가한 localStorage 항목을 읽는 법은 다음과 같습니다.

const cat = localStorage.getItem('myCat');

그리고 제거는 아래와 같습니다.

localStorage.removeItem('myCat');

localStorage 항목의 전체 제거 구문입니다.

localStorage.clear();

---

유저는 한 명만 입력을 할것이므로

localstorage에 정보가 있다면, 유저 이름을 입력하는 form input창을 화면에서 가릴것이다.

 

form.claassList를 사용한 이유는 form이 js와 css에 각각 사용하기 위한 클래스를 두개 가지고 있어서

그걸 동시에 제어 하려면 classList를 쓰는게 편리하다.

텍스트를 출력할거면 form태그를 숨겨야된다. 

---

user의 이름이 없을 때 추가하는 함수를 만들어보자.

문제는 input에 이름을 적고 Enter를 누르면 이 form은 어딘가로 submit한다.

form을 submit 하면 text값이 사라지고 새로 고침 되면서 초기화된다 이게 form의 defalt 값이라서 그런다 

이런 새로 고침 현상을 제어해주어야한다 

---

이 문제를 해결하기 위해 submit 했을 때 제어할 수 있는 함수(handleSubmit)를 추가해보겠다.

 

event의 preventDefault 라는걸 사용했다.

보통 이벤트가 발생하면 root에서 일어나고, form에서 일어난다.

form을 제출하는 이벤트가 발생하면 이벤트가 계속 위로 올라가 document까지 올라간다.

아까 이름 입력했을 때 반응 없던것처럼 그 document는 다른곳으로 가면서 페이지가 새로고침된다.

이 이벤트의 이러한 특성을 preventDefault로 막은거다.(기본동작)

 

 

---

이제 이 파라미터의 현재 value가 필요하다

우린 이미 input(입력받는 태그)을 가지고 있다

이 input은 많은것을 할수있다 텍스트 ,placeholder,클래스를 가질수있고

뿐만 아니라 value도 얻을수가 있다.

 

function handleSubmit(event) {
    event.preventDefault();
    const  currentValue = input.value;
}

 

 

우리는 이 value로 paintGreeting 함수를 다시 부를거다

여기서 paintGreeting이 text를 필요로 한다는것을 기억해야 된다.

이렇게 하면 이름 입력 시 화면에 출력이 된다.

---

하지만 또 새로고침을 하니까 날아가버리는 문제점이 발생했다.

그래서 이 input.value를 localStorage에 키 값인 currentUser와 함께 저장해야된다.

 

saveName 함수를 만들어보자.

모든 key 와 value 는  항상 string 으로 저장된다.

 

※ localStorage 사용법

---

이제 submit 이벤트 발생 시 화면에 출력하는것 뿐만 아니라,

localStorage에 저장할 수 있게 되었다.

---

<코드 기록>

const form = document.querySelector(".js-form"),
    input = form.querySelector("input"), //form이 input의 부모이므로 . 붙이지 않고 가져옴
    greeting = document.querySelector(".js-greeting");

const USER_LS = "currentUser";
const SHOWING_CN = "showing";

function askForName() {
    form.classList.add(SHOWING_CN);
    form.addEventListener("submit", handleSubmit);
}

function handleSubmit(event) {
    event.preventDefault();
    const currentValue = input.value;
    paintGreeting(currentValue);
    saveName(currentValue);
}

function saveName(text) {
    localStorage.setItem(USER_LS, text);
}

function paintGreeting(text) {
    form.classList.remove(SHOWING_CN);
    greeting.classList.add(SHOWING_CN);
    greeting.innerText = `Hello! ${text}`;
}

function loadName() {
    const currentUser = localStorage.getItem(USER_LS);
    if (currentUser === null) {
        askForName();
    } else {
        paintGreeting(currentUser);
    }
}

function init() {
    loadName();
}

init();

 

 

 

이글의 출처는 

예비 웹 개발자의 공부 기록 저장소

예비 웹 개발자의 공부 기록 저장소

저작자표시 4.0 국제 (CC BY 4.0)를 준수하며 

여기 티스토리에서 가져왔습니다