[DAY - 64] localStorage 기초, localStorage 형식변환, localStorage 예제

• localStorage 기초
• localStorage 형식변환
• localStorage 예제

 

 

1) localStorage 기초

 

        localStorage.setItem('key', 'value')
        localStorage.getItem('key')
        localStorage.removeItem('key')
        localStorage.clear() 전체 제거
        localStorage.key( index )
        localStorage.length

 

    <script>
        let div = document.querySelector('div')


        // 문자
        window.localStorage.setItem('name', '김')
        window.localStorage.setItem('age', '30')

        const name = localStorage.getItem('name')
        const age = localStorage.getItem('age')
        const len = localStorage.length

        const key = localStorage.key(0)

        div.innerHTML += 'name : ' + name;
        div.innerHTML += '<br>age : ' + age;
        div.innerHTML += '<br>length : ' + len;
        div.innerHTML += '<br>key : ' + key;

        const keys = Object.keys(localStorage)
        const values = Object.values(localStorage)

        console.log(keys);
        console.log(values);
        console.log(localStorage);
    </script>

 

localStorage는 문자값으로 처리되며 { key : value } 형식으로 저장된다.

 

    <script>
        let btn = document.querySelector('.btn')
        let txt = document.querySelector('input')
        let out = document.querySelector('.output')
        let p = document.querySelector('p')

        btn.addEventListener('click',e=>{
            let li = document.createElement('li');
            li.textContent = txt.value
            txt.value = ''
            txt.focus();

            out.append(li)
            
        })
    </script>

 

위 코드처럼 단순 값만 출력하게 되면 새로고침 시 내용이 모두 사라지게 된다. 

 

    <script>
        let btn = document.querySelector('.btn')
        let txt = document.querySelector('input')
        let out = document.querySelector('.output')
        let p = document.querySelector('p')

        // localStorage.clear();
        let name = localStorage.getItem('name')
        p.innerHTML += `<span>${name}</span>`;

        btn.addEventListener('click',e=>{
            let li = document.createElement('li');
            li.textContent = txt.value
            txt.value = ''
            txt.focus();

            out.append(li)

            localStorage.setItem('name', li.textContent)
        })
    </script>

 

하지만 localStorage를 사용하게 되면 local에 저장되기 때문에 마지막으로 입력한 값이 나오도록 해 보았다.

 

 

 

2) localStorage 형색변환

 

    <script>
        let out = document.querySelector('.output')
        let obj = [
            { name: '김' },
            { name: '이' },
            { name: '박' }
        ]

        let newObj = [...obj]

        localStorage.setItem("newObj", JSON.stringify(newObj))
        console.log(localStorage);

        const showView = () => {
            let p = document.createElement('p');
            newObj = localStorage.getItem("newObj")
            newObj = JSON.parse(newObj)
            console.log(newObj);

            newObj.forEach(ele => {
                let p = document.createElement('p');
                p.textContent = ele.name;
                out.append(p)
            });
        }
        showView();
    </script>

 

localStorage 형식은 JSON과 같아서 javascript 객체 형식과 맞지 않다.

따라서 기존 객체를 문자열로 변환해 주는 stringify() 함수를 사용해 주었다.

반대로 변환해 주는 함수는 parse()이다

 

 

 

3) localStorage 예제

 

    <script>
        let btn = document.querySelector('.btn')
        let txt = document.querySelector('input')
        let out = document.querySelector('.output')
        let p = document.querySelector('p')
        let delBtns = document.querySelectorAll('li button')
        let obj = [
            // { id: 1, text: 'a' },
            // { id: 2, text: 'b' },
            // { id: 3, text: 'c' }
        ]
        // id 사용시 변수
        let no = obj.length;

        // localStorage.clear();
        obj = JSON.parse(localStorage.getItem("obj")) || []

        // del
        const delShow = (delBtn, id) => {
            delBtn.addEventListener('click', e => {
                obj = obj.filter(item => item.id != id)
                localStorage.setItem("obj", JSON.stringify(obj))
                show()
            })
        }


        // 출력
        const show = () => {
            out.innerHTML = ''
            obj.forEach(ele => {
                // 비구조할당
                const { id, text } = ele
                let li = document.createElement('li');
                let delBtn = document.createElement('button');
                delBtn.textContent = `DEL`
                li.textContent = `${id} / ${text}`
                li.append(delBtn)
                out.append(li)

                delShow(delBtn, id)
            })
            txt.value = ''
            txt.focus();
        }
        show()

        // 추가
        const add = () => {
            obj = [
                ...obj,
                {
                    id: ++no,
                    text: txt.value
                }
            ]
            localStorage.setItem("obj", JSON.stringify(obj))
        }

        btn.addEventListener('click', e => {
            if (txt.value) {
                add();
                show();
            }
            console.log(delBtns);
        })
    </script>

 

input에 text를 넣은 뒤 버튼을 누르게 되면 input의 value 값을 obj 객체에 추가해 준다.

innerHTML로 기존 값을 지운 뒤 새로 추가한 값이 들어있는 obj 객체를 출력해 준다.

del 버튼을 누르게 되면 단순 element만 remove 하는 것이 아닌 localStorage 객체를 지울 수 있도록 했다.