[JavaScript] localStorage 를 이용한 정보저장

사실 localStorage 완전 조금 씀(별 대단한건 없단거임)

오늘 만들어 볼거는 사용자의 이름을 저장하는거다 !

1. 이름을 입력

2. 이름을 출력

3. 새로고침해도 변하지 않음 !

결과물 부터 보자

이름 입력 칸에 입력을 하면

정보가 저장이 된다 !

그리고 이건 새로고침해도 지워지지 않지

localStorage 를 보면 나의 정보가 저장이 된 걸 확인할 수 있다.

localStorage 삭제 방법은 저기 있는 버튼 눌러주면 됨

쨋든 이런거 만들었다 하하

시작해보자

우선 HTML 이다 중간의 <script src='clock.js'></script> 는 이전에 썼던거니까 신경쓰지 않아두댐

form 안에 input 만들어줬다 name.js 파일 연결시켜줬고

form 에 class 값이 두개 있다 (이거 나름 중요)

CSS 파일이다 

hidden 클래스에 display:none;

showing 클래스에 display:block; 

을 주었다 나중에 쓰이니까 잘 기억하기

JS 파일이다 전체 캡쳐해서 올릴까 하다가 보기 어려울것같아서 부분부분 잘라서 올릴겨

전체 소스는 마지막에 넣도록 하겠음

우선 HTML 파일의 애들 가져와준다 (일일히 설명하기 어려우니 위에서 보면서 비교하기)

loadName() 부분이다

만약에 현재 localStorage 에 저장된 내용이 있다면 saveOutput을 실행

없다면 askName 을 실행시키는거다 !

우선 askName 부분을 보자

form 에 (위에서 선언함) class 를 하나 더 추가해준다 -> css의 showing 이 실행이 될겨

form 을 submit 했을때 saveName 이 실행되게끔 해준다.

saveName을 보자

event.preventDefault : 이벤트 발생시 자동으로 실행되는걸 막아준다 (submit 의 경우엔 새로고침)

event.prenentDefault() 를 이용해 엔터를 쳤을때 새로고침되는걸 막아준다

input 된 이름을 currentUser에 저장을 해주고

이후에 saveLocal 과 saveOutput 에 currentUser 값을 넘겨주면서 실행

saveLocal 부분이다 name 을 인자로 받는데 아까 currentUser을 넘겨받았다

localStorage : 자그마한 정보를 컴퓨터에 저장하는것  이라고 생각하자

setItem 을 쓰면 저장이 되는데 array 로 저장이 되게 된다

key 에 "currentUser"(스트링이다) 을 value 에 받아온 name을 저장해준다. 

사실 이렇게만 하면 끝임..

saveOutput 부분이다

HTML 에서 가져온 outputName 에 innerHTML 로 값을 넣어준다 

이후에 

form 의 showing 클래스를 없애고

outputName 에 showing 클래스를 추가해준다

이렇게 되면 form 에는 원래 있던 hidden 이 동작하게 되어 작동이 되면 모습이 보이지 않게 될것이다 !

그리고 outputName 에는 showing 클래스가 추가가 되어 display:block 이 되는거임

전체 소스

const form=document.querySelector(".js-name");

const inputName=form.querySelector("input"); //이름 입력받은거

const outputName=document.querySelector(".js-output"); //저장된 애가 출력 될거

function saveLocal(name){

localStorage.setItem("currentUser",name);

}

function saveOutput(text){

outputName.innerHTML=`안녕하세요 ${text} 님`;

form.classList.remove('showing');

outputName.classList.add("showing");

}

function saveName(event){

event.preventDefault();

const currentUser=inputName.value;

saveLocal(currentUser);

saveOutput(currentUser);

}

function askName(){

form.classList.add("showing");

form.addEventListener("submit",saveName);

}

function loadName(){

const currentValue=localStorage.getItem("currentUser");

if (currentValue===null){

askName();

}

else

{

saveOutput(currentValue);

}

}

function init() {

loadName();

}

init(); 

그럼 끝 안녕