개인화된 환영 메시지 추가하기

var myButton = document.querySelector('button');
var myHeading = document.querySelector('h1');

 

새로 추가된 버튼과 제옥을 참조하여 변수에 저장합니다.

 

function setUserName() {
    var myName = prompt('Please enter your name.');
    localStorage.setItem('name', myName);
    myHeading.textContent = 'Mozilla is cool, ' + myName;
}

 

prompt는 사용자가 데이터를 입력하도록 요청하는 것이고
사용자가 입력한 데이터를 변수에 저장합니다.

브라우저에 데이터를 저장하고 나중에 불러올 수 있도록
해주는 localStorage라는 API 를 부릅니다.

'name' 이라는 데이터 항목을 생성 후 저장하기 위해
localStorage의 setItem()함수를 사용합니다.

그리고 사용자가 입력한 값을 myName 변수에 저장합니다

그리고 myHeading의 textContent은
'Mozilla is cool' 문자열과 myName 변수의 값을 출력합니다.

 

 

if(!localStorage.getItem('name')) {
    setUserName();
  } else {
    var storedName = localStorage.getItem('name');
    myHeading.textContent = 'Mozilla is cool, ' + storedName;
}

 

!는 not 부정문과 동일합니다.

 

(!localStorage.getItem('name') 값이 없다면 

setUserName() 함수를 실행합니다.

 

값이 존재한다면

 

스토리지에 있는 값을 불러오고 헤딩의 textContent로 

문자열과 storedName 변수값을 출력합니다.

 

 

myButton.onclick = function() {
  setUserName();
}

 

버튼을 누르면 클릭이벤트가 실행되어 해당 함수의 setUserName 함수가 실행됩니다.