javascript day2

오늘은 이벤트를 사용해서 특정 태그가 사라지는 효과를 넣어보자. 그리고 더 나아가 브라우저 내에 있는 localstorage를 이용해서 정보를 저장하고 불러내자.

![](https://velog.velcdn.com/images%2Fralo-gimhae%2Fpost%2Fbcb87e51-3ab9-4c17-8607-1629d0f6c59d%2Fimage.png)
    
위와 같은 형태의 기초적인 html문서가 있다. 
여기서 우리는 해당 form의 input과 button태그를 특정한 변수에 담아서 사용할 수 있다. 

const myInput1 = document.querySelector('#log-form input');

const myBtn1 = document.querySelector('#log-form button');

우리는 기초적인 html에 관해서 배우면서 form과 input button의 
특징들에 대해서 살펴본 적있다.
그곳에서 input과 button을 form 안에 두면 기본적인 속성값으로 submit와 함께 브라우저가 자동적으로 새로고침된다. 
이것은 우리가 이러한 속성을 모르고 있을 경우 입력한 값이 console에 출력되지 않는 황당한 경험을 하게 된다. 

이러한 자동새로고침 현상을 막기 위해서 어떻게 할까??? 
  
챕터 1 : 새로고침을 막는 마법 인자!!(arg)

가령 input에 값을 입력하고 submit할 경우 우리가 브라우저의 새로고침을 막고 싶다면 아래와 같이 하면 된다.

function handleRefresh(kim) {
	kim.preventDefault();
  	console.log(myInput.value);
}

myInput.addEventListener('submit', handleRefresh);

챕터 2 : classList를 이용해서 해당 태그 숨기고 보여주기

만약 우리가 어떤 값을 form에 넣고 form은 숨겨진 
다음 그 값이 h1에 출력되서 나오도록 하고 싶다면 어떻게 할까?????

1. css 작성
.hidden { display : none; }

2. css를 활용하기 
const myInput1 = document.querySelector('#log-form input');

const myBtn1 = document.querySelector('#log-form button');

const myH1 = document.querySelector('h1');

function handleForm(kim){
	kim.preventDefault();
  	
  	myInput.classList.togle('hidden');
  	
  	myH1.classList.togle('hidden');
  	myH1.innerText = 'hello' + ' ' + myInput.value;

}

myInput1.addEventListener('submit', handleForm);

챕터 3 : localstorage를 활용해서 저장 불러오기 그리고 삭제해보자.

1. 어떻게 로컬저장소를 이용할까??? 
  
localstorage.setItem('키값', 벨류);
localstorage.getItem('키값');
localstorage.remove('키값');

그러면 local저장소를 이용해서 앞서 했던 작업을 해보자. 
css :
.hidden { display : none; }

js :
const myForm = document.querySelector('#log-form');
const myInput = document.querySelector('#log-form input');
const myH1 = document.querySelector('h1');
function handleForm(tomato) {
    tomato.preventDefault();
    localStorage.setItem('username', myInput.value);
}

myInput.addEventListener('submit', handleForm);
const savedName = localStorage.getItem('username');
if (savedName !== null ) {
    myForm.classList.add('hidden');

    myH1.classList.remove('hidden');
    myH1.innerText = 'hello' + ' ' + savedName;
}