JavaScript localStorage 활용 예제 (2)

LocalStorage 활용 예제)

 

 

다음과 같은 html이 있다.

    <input type="text" placeholder="번호입력..." id="inputNum">

    <br>

    <input type="text" placeholder="이름입력..." id="inputName">

    <br>

    <input type="text" placeholder="주소입력..." id="inputAddr">

    <br>

    <button id="saveBtn">저장</button>

    <button id="deleteBtn">삭제</button>

 

번호, 이름, 주소를 입력하고 저장 버튼을 누르면 localStorage에 저장하고
삭제 버튼을 누르면 localStorage 에 저장된 정보를 삭제하고
        
페이지 로딩 시점에 localStorage 에 저장된 번호, 이름, 주소가 있다면
위의 input 요소에 출력되도록 해 보시오.

 

 

        document.querySelector("#saveBtn").addEventListener("click", ()=>{

            // 1. 입력한 내용을 읽어와서

            const num = Number(document.querySelector("#inputNum").value);

            const name = document.querySelector("#inputName").value;

            const addr = document.querySelector("#inputAddr").value;

            // 2. object에 담고

            const obj = {num, name, addr}

            // 3. object 를 JSON 문자열로 만들어서

            const json = JSON.stringify(obj);

            // 4. localStorage 에 저장

            localStorage.savedMember = json;

        });

저장 버튼을 눌렀을 경우에 실행되는 Event

 

 

 

        if (localStorage.savedMember) {

            // localStorage 에 저장된 문자열을 이용해서 object 를 만든다.

         const obj = JSON.parse(localStorage.savedMember);

         // object 에 저장된 내용을 input 요소에 출력한다.

         document.querySelector("#inputNum").value = obj.num;

         document.querySelector("#inputName").value = obj.name;

         document.querySelector("#inputAddr").value = obj.addr;

        }

페이지 로딩 시 실행되는 if 문

 

 

 

        document.querySelector("#deleteBtn").addEventListener("click", ()=>{

        delete localStorage.savedMember

        });

삭제 버튼을 눌렀을 경우에 실행되는 Event

 

 

 

최초 실행 시 위와 같이 로딩된다.

 

 

위와 같이 입력하고 저장버튼을 눌렀을 경우 페이지를 재 로딩해도 해당 데이터가 남아있다.

 

 

새로고침 한 상태

 

 

 

데이터가 남아있는 상태에서 삭제 버튼을 누르면 localStorage에 있는 값이 삭제되어 페이지 재 로딩 시 처음 상태로 로딩된다.

 

 

 

삭제 버튼을 누르고 페이지 새로고침한 모습