[ JS : 실습 : Saving the User Name (1) ]

Teasan·2020년 11월 22일
0

JavaScript

목록 보기
5/15
post-thumbnail

📍 Javascript를 공부했을 때 학습노트에 정리해둔 것을 옮겨왔다.

<querySelector>

  • document.quertSelector : 원하는 셀렉터는 다 가져올 수 있는 방법. Class, tag, id, css 등등의 방식으로. 첫번째 것을 찾아서 가져온다.
  • document.quertSelectorAll : 클래스 명에 따른 엘리먼트를 가져온다. 모든 걸 가져온다.
    참고 MDN

<local storage>

  • 작은 정보를 나의 유저 컴퓨터(브라우저)에 저장하는 방법.

브라우저의 Console 창에서 localStorage.setItem을 설정했을 때

브라우저의 application 창에서 Local Storage 페이지를 보면

내가 setItem을 통해 설정한 값인 localStorage.setitem(“min”, true) 값이 저장되어 있는 것을 알 수 있다.

"localStorage.setitem(“Key”, Value)"

새로 고침을 해도 여전히 저장된 것을 확인할 수 있다.

localStorage를 통해서 아이템을 불러올 수도 있다.

브라우저의 application => Local Storage에 저장된 값을 수정한다면,

수정된 값으로 출력되었음을 확인할 수 있다.

최종 코드

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

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

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


/* —— local storage 이용하기 —- */
function loadName() { 
// local storage에서 가져오는 용도
    const currentUser = localStorage.getItem(USER_LS);
    if(currentUser === null) {
    // 로컬 스토리지에 유저가 없을 때(null)
    } else {
    // 로컬 스토리지에 유저가 있을 때
    paintGreeting(currentUser); 
    // paintGreeting 함수를 부른다. 로컬 스토리지에서 가져온 텍스트와 함께.
    }
}

function init(){
    loadName();
}
init();
profile
일단 공부가 '적성'에 맞는 개발자. 근성있습니다.

0개의 댓글