[js] localStorage 에 저장된 값을 화면에 출력 2

* 이 게시판은 배운 것을 간단하게 혼자 다시 짜보는 곳

 

목표: 

입력한 값이 화면에 출력이 되고, 새로고침이나 페이지 전환을 해도 그 값이 유지.

 

 

const form = document.querySelector('.js-form');
const input = form.querySelector('input');
const greeting = document.querySelector('.js-greetings');


const GREETING_LS = "currentStorage";
const SHOWING_CN = "showing";

// 4. saveName 함수로 localstorage 에 input 값을 저장
function saveName(t){
    localStorage.setItem(GREETING_LS,t)
}

// 3. input 에 값 입력시 현재 값은 input.value 로 고정, 
//    paintText 함수로 화면에 출력을 하고
// 5. saveName 에서 전달 받은 t 라는 변수는 곧 input.value이다.
function handleSubmit(e){
    e.preventDefault();
    const currentValue = input.value;
    paintText(currentValue)
    saveName(currentValue)
    console.log(currentValue)
}

// 2. input 박스 출현, 폼이 submit 작업을 할 때 hadling function 작동
function askForName(){
    form.classList.add(SHOWING_CN);
    form.addEventListener("submit",handleSubmit);
}

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

function loadName(){
    // localstorage 에서 값 가져오기
    const currentUser = localStorage.getItem(GREETING_LS);
    if(currentUser === null){
        // 1. localstorage 에서 값이 없을 때 인풋 박스 출현
        askForName();
    }else{
        paintText(currentUser);
    }
}

function init(){
    loadName();
}

init();

 

 

init() -> loadName() -> askForName() -> handleSubmit() -> paintText() && saveName().