이름저장하기 - localstorage

형태 : 

form태그 안에 각 태그들이 notView클래스를 가지고있는 hidden상태입니다

순서 : 

1. 필요한 위치의 HTML요소 불러오기

2. localstorage에 User가 있는지 확인

3. 유저가 없는경우 함수 생성

NOTVIEW클래스를 지우고, submit시 동작할 이벤트를 추가

4. 이벤트 함수 생성

이벤트 발생시 기본동작을 제거 / localStorage에 User추가 / NOTVIEW클래스를 다시 추가해서 안보이게 해주고, 유저가 있을때 동작하는 함수 실행

4. 유저가 있는경우 함수 생성

필요한 객체들의 NOTVIEW클래스를 지우고, USER의 이름을 출력 / 버튼에 이벤트 추가

5. 버튼이벤트 생성

버튼 클릭시 localStorage의 USER객체를 비우고, Input만 보이게 변경

공부 : 

이벤트 추가 : addEventListener('동작', function)   - function에 ()안붙임

이벤트 발생시 기본이벤트 무시 : event.preventDefault();   - 자동완성 없음

클래스 추가 : 요소.classList.add('클래스이름');

클래스 삭제 : 요소.classList.remove('클래스이름');

localStorage 추가 : localStorage.setItem(key, value);

localStorage에서 요소 가져오기 : localStorage.getItem(key);

 

결과 :

github.com/dnrudzx/web/blob/master/study/Nomad_Coder_vanila_JS/index.html

dnrudzx/web

github.com/dnrudzx/web/blob/master/study/Nomad_Coder_vanila_JS/index_nameForm.js

dnrudzx/web

 

출처 : 노마드코더 - 바닐라 자바스크립트 강좌

www.youtube.com/watch?v=lXxlGCRBOQU&list=PLLUCyU7SBaR7tOMe-ySJ5Uu1UlEBznxTr&index=24