[JAVASCRIPT] 모멘텀 클론코딩 3-2

노마드 코더의 모멘텀 클론코딩3-2

 

1. gretting.js 파일에 각각의 함수 추가

1.1 askForName() , handleSubmit(event) , saveName(text)

1.2 askForName 함수는 localStorage 에 아무런 데이터가 없을 때 인풋 값을 보여주게 하는 함수이다

1.3 그리고 form 에 대해서 submit 이 발생했을 때 handleSubmit 이라는 함수를 실행한다.

1.4 handleSubmit 함수에서는 event라는 이름의 매개변수를 받는다.

1.5 preventDefault() 라는 함수는 브라우저에서 엔터를 눌렀을 때 새로고침을 일어나지 않게 한다.

1.6 그다음 input 값의 value를 얻어 currentValue 라는 변수에 저장하고, 이전 모멘텀 클론코딩 3 과 같이 paintGreeting 함수를 이용해 Hello text 라는 문자열을 출력한다.

1.7 그 다음 saveName 함수를 이용해 localStorage.setItem 함수를 이용해 currentUser 라는 이름으로 value 값을 저장한다.

 

2. 결과를 확인해보자

2.1 파일을 열면 아래와 같이 input 값을 입력하는 텍스트 창이 보인다.

2.2 여기에 데이터를 입력하고 엔터를 누르면 Hello 종완 이라는 텍스트와 함께 개발자도구를 이용하여 localStorage 값을 확인해보면 currentUser key 값 안에 value 값으로 종완이 들어가 있는것을 볼 수 있다.

2.3 만약 key 값을 고치거나 value 값을 고치고 새로고침을 누르면? 아래와 같다.