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

삭제기능

function Delete(a) {
    //로컬스토리지의 아이디와 비밀번호 데이터를 받을 배열을 만듬//
    let list = [];
    let visitId = prompt("아이디를 입력하세요");
    let visitPw = prompt("비밀번호를 입력하세요");
    //반복문과 push의 조합을 사용함. 로컬스토리지는 문자열만 들어가기 때문에 객체화JSON.parse룰 해줌//
    for (var i = 0; i < localStorage.length; i++) {
        if (localStorage.key(i).indexOf(arr) != -1) {
            list.push(JSON.parse(localStorage.getItem(localStorage.key(i))));
        };
    }; console.log(list)
    //로컬스토리지의 데이터를 map을 사용해서 아이디, 비밀번호만 뽑음//
    let idList = list.map((list) => list.userid)
    let pwList = list.map((list) => list.userpw)

    if (!visitId && !visitPw) {
        alert("아이디 또는 비밀번호를 확인해주세요")
        return false
    } else if (idList.indexOf(visitId) == -1) {
        alert("아이디를 확인해주세요")
        return false
    } else if (pwList.indexOf(visitPw) == -1) {
        alert("비밀번호를 확인해주세요")
    } else {
        alert("삭제되었습니다")
        //로컬스토리지 삭제//
        window.localStorage.removeItem(arr + visitId + visitPw + a)
        location.reload()
    }
}

먼저 prompt를 사용해서 아이디 값과 비밀번호 값을 받아온다.

load()함수와 마찬가지로 for 반복문으로 특정 댓글 데이터를 추출한다.

 

map함수를 사용해서 id값과 비밀번호 값을 따로 추출한다.

 

if문을 사용해서 prompt로 얻은 값과 저장된 값을 비교한다.

서로 맞다면

 window.localStorage.removeItem(arr + visitId + visitPw + a)
        location.reload()

위 코드와 같은 키를 가지고 있는 로컬스토리지의 데이터를 삭제하고 새로고침한다.

 

 

 

수정기능

function Update(a) {
    let list = [];
    let updateId = prompt("아이디를 입력하세요");
    let updatePw = prompt("비밀번호를 입력하세요");
    //반복문을 통해서 특정 데이터만 추출 JSON.parse로 객체화//
    for (var i = 0; i < localStorage.length; i++) {
        if (localStorage.key(i).indexOf(arr) != -1) {
            list.push(JSON.parse(localStorage.getItem(localStorage.key(i))));
        };
    }; console.log(list)
    //map을 통해서 원하는 데이터만 뽑음//
    let idList = list.map((list) => list.userid)
    let pwList = list.map((list) => list.userpw)
    if (!updateId && !updatePw) {
        alert("아이디 또는 비밀번호를 확인해주세요")
        return false
    } else if (idList.indexOf(updateId) == -1) {
        alert("아이디를 확인해주세요")
        return false
    } else if (pwList.indexOf(updatePw) == -1) {
        alert("비밀번호를 확인해주세요")
    } else {
        //수정될 내용//
        let pixComment=prompt("내용을 입력해주세요")
        alert("수정이 완료되었습니다.")
        //로컬스토리지 값에 들어갈 수정된 객체//
        let saveObj={'userid':updateId,'userpw':updatePw,'comment':pixComment,'index':a}
        //수정된 데이터를 저장//
        window.localStorage.setItem(arr+updateId+updatePw+a,JSON.stringify(saveObj))
        location.reload()
    }
}

삭제기능과 똑같이 prompt를 통해서 아이디 값과 비밀번호 값을 받아오고 for 반복문과 map으로 특정 데이터를 추출.

if문의 조건을 달성하면

prompt로 수정할 코멘트 데이터의 값을 가져올 수 있다.

 

로컬스토리지는 키가 같은 데이터를 저장하면 원래 키에 할당되어 있던 데이터가 덮어씌어지는 성질을 가지고 있다.

이를 이용한다.

        let pixComment=prompt("내용을 입력해주세요")
        //로컬스토리지 값에 들어갈 수정된 객체//
        let saveObj={'userid':updateId,'userpw':updatePw,'comment':pixComment,'index':a}
        //수정된 데이터를 저장//
        window.localStorage.setItem(arr+updateId+updatePw+a,JSON.stringify(saveObj))
        location.reload()