[내일배움캠프] 노드몬 팀 과제 영화사이트 제작-3-

저장기능

function load() {
    //로컬스토리지의 데이터를 받을 배열//
    let list = []
    //상세페이지의 아이디와 같은 데이터만 뽑음//
    for (var i = 0; i < localStorage.length; i++) {
        if (localStorage.key(i).indexOf(arr) != -1) {
            list.push(JSON.parse(localStorage.getItem(localStorage.key(i))));
        };
    }
    //map 붙힐 곳//
    const listBox = document.querySelector("#visitBook")
    listBox.innerHTML = list.map(
        (list) => `<div class="labalId">${list.userid}</div>
                 <div id="${list.index}" class="listBox">
                 <div class="labalComment">${list.comment}</div>
                 <button onclick="Update(${list.index})">수정</button>  
                 <button onclick="Delete(${list.index})">삭제</button>
                 </div>`
    )
}

저장한 댓글의 데이터를 로드해서 붙혀주는 함수 load()다.

먼저 for문으로 댓글의 데이터를 전부 받아오고 if문과 indexOf로 특정 데이터를 추출한다.

이를 통해서 댓글이 같은 로컬스토리지에 저장되어 있지만 각 영화의 페이지 마다 그에 맞는 댓글만 로드가 된다.

또한 반복문으로 빈 배열 list에 댓글데이터의 값을 넣는다.

받아온 값은 객체의 형태를 한 문자열이기 때문에 이를 객체화 해주는 JSON.parse를 사용한다.