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

팀 사정상 댓글기능 구현 또한 내가 맡게 되었다.

 

댓글 저장 기능

 <div id="review">
    <div class="login">
      <input type="text" id="comment" placeholder="comment" maxlength='144'>
      <input type="text" id="nickName" placeholder="name" maxlength='8'>
      <input type="password" id="password" placeholder="password"  oninput='handleOnInput(this, 8)'>
    </div>
    <div class="buttons">
      <div class="button">
        <button class="save" type="button" onclick="save()">작성</button>
      </div>
    </div>
    <div id="visitBook">
    </div>

먼저 댓글을 작성하기 위한 댓글 닉네임과 비밀번호, 그리고 코멘트 부분의 뼈대를 만들었다.

그리고 아이디, 비밀번호, 코멘트의 글자수를 maxlength / oninput='handleOnInput(this, 8)로 제한했다.

const nickName = document.getElementById('nickName');
const password = document.getElementById('password');
const comment = document.getElementById('comment');

닉네임과 비밀번호, 코멘트를 getElementById 로 받아온다.

function save() {
    if (!nickName.value && !password.value) {
        alert("아이디 또는 비밀번호를 확인해주세요")
        return false
    } else if (!nickName.value) {
        alert("아이디를 확인해주세요")
        return false
    } else if (!password.value) {
        alert("비밀번호를 확인해주세요")
        return false
    } else {
        //로컬스토리지에 저장될 고유한 값을 index로 만듬//
        let index = localStorage.length
        //로컬스토리지의 값이 될 부분을 객체화함//
        let saveObj = { 'userid': nickName.value, 'userpw': password.value, 'comment': comment.value, 'index': index }
        //로컬스토리지의 키와 값을 지정, JSON.stringify로 문자열화//
        window.localStorage.setItem(arr + nickName.value + password.value + index, JSON.stringify(saveObj))
        location.reload()
    }
}

먼저 닉네임과 비밀번호, 코멘트를 기입함에 있어서 조건을 달아준다.

조건을 만족하면 로컬스토리지에 저장한다.

 let index = localStorage.length는 댓글이 추가될 때 마다 고유한 index값이 할당된다.

 let saveObj는 나중에 댓글 수정, 삭제할 때 필요한 정보를 객체의 형식으로 할당했다.

window.localStorage.setItem으로 로컬스토리지에 저장했다.

(arr + nickName.value + password.value + index) 이 부분은 로컬스토리지에 저장된 댓글의 고유한 키다.

값 부분은 JSON.stringify로 문자열화 한 saveObj다. 로컬스토리지는 문자열 밖에 저장이 안 되기 때문이다.

}
//작성버튼을 누르면 방명록이 자동으로 보이게, 이 함수로 인해서 작성 버튼에 onclick 속성을 두개 부여함//
window.onload = function () {
    let a = document.getElementsByClassName("save");
    a.onclick = load();
}

작성버튼을 누르면 save() 함수 뿐만이 아니라 새로고침이 되면서 load()함수도 같이 실행된다.