📍 Javascript를 공부했을 때 학습노트에 정리해둔 것을 옮겨왔다.
<querySelector>
<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();