[Toy Projects] 'Color, me' project (5)

다음은 구현 동작 7번이다.

“저장한 색 조합을 삭제, 수정할 수 있도록 하기”

 

구현 동작 6번을 할 때, 삭제, 수정, 이름변경 버튼을 만들었다.

 

우선 삭제 기능이다. 삭제는 간단하게 localStorage에서 해당 key값을 찾아서 삭제한 후에 페이지를 reload 시켰다.

// 저장된 조합 삭제
function deleteSave(saveName) {
    if (confirm("조합을 삭제할까요?")) {
        window.localStorage.removeItem(saveName);
        alert("'" + saveName + "' 조합이 삭제되었습니다.");
        location.reload();
    }
}

 

다음은 수정 기능이다. 수정 버튼을 누르면 해당 조합이 색 조합 입력 폼에 전송이 되도록 했다.

그 후에 다시 저장을 하면 수정이 완료된다.

// 기존 조합을 수정할 저장이면 1, 그냥 새로운 조합 저장이면 0
let savingUpdateNum = 0;
let globalSaveName = "";

// 저장된 조합 수정
function updateSave(saveName) {
    init();
		// 원래 색 조합을 수정 후, 저장할 때
    savingUpdateNum = 1;
    globalSaveName = saveName;
    let value = JSON.parse(window.localStorage.getItem(saveName));
    for (let i = 0; i < value.length; i++) {
        plusColor(value[i], i + 1);
    }
    document
        .getElementsByClassName("btn")[1]
        .setAttribute("onclick", "resaveColor()");
}

// 저장된 조합을 수정하고 다시 저장하기
function resaveColor() {
    let saveCheck = confirm("색 조합을 저장하시겠습니까?");
    if (saveCheck) {
        save(globalSaveName);
        location.reload();
    }
}

여기서 새롭게 추가된 것은 savingUpdateNum과 globalSaveName이라는 전역변수이다.

완전 새로 저장하는 것과, 원래의 것을 수정해서 저장하는 것은 차이를 둬야 했다.

(특히, 저장할 때의 이름 중복으로 인해서)

 

사실 저장하는 함수를 하나 더 만들면 전역변수를 만들지 않고 끝낼 수 있는 문제였다.

(실제로 처음엔 그렇게 했고..)

하지만 문제는 색 조합을 추가하는 폼에서 변경 버튼을 눌러서 리스트를 수정하면

UpdatetoAdd() 함수로 인하여 새로운 색 조합을 저장하는 버튼이 생성이 되는 것이다.

즉, 만약 새롭게 색 조합을 저장하는 함수를 save()라고 하고, 기존의 색 조합을 다시 저장하는 함수를 resave()라고 한다면, 수정을 할 때는 resave() 버튼이 만들어져야 하는데 save() 버튼으로 돌아오는 것이다.

 

그 조건을 나누기 위해 savingUpdateNum을 선언했다.

그래서 수정해서 저장하는 경우에는 savingUpdateNum을 1로 설정을 하고, 새롭게 저장하는 경우에는 0으로 설정을 했다.

// 변경된 UpdatetoAdd()
function UpdatetoAdd() {
    let _btn = document.getElementsByClassName("btn")[0];
    _btn.innerHTML = "추가";
    _btn.setAttribute("onclick", "okay()");
    let _btn2 = document.getElementsByClassName("btn")[1];
    _btn2.innerHTML = "저장";

		// savingUpdateNum에 따라서 새로운 조합을 저장할지, 기존 조합을 저장할지 결정
    if (savingUpdateNum === 0) {
        _btn2.setAttribute("onclick", "saveColor()");
    } else {
        _btn2.setAttribute("onclick", "resaveColor()");
    }
}

 

또한 globalSaveName은 수정할 색 조합의 원래 이름이다.

이 이름을 save() 함수에 전달을 해야 이름 새로 입력을 받지 않고 저장할 수 있다.

 

(추가)

전역 변수들을 사용한 후, 원래의 값으로 돌려놓지 않은 이유는 페이지 새로고침이 되기 때문에 원래의 값으로 돌려놓지 않아도 된다.

 

 

이름 변경 기능은 새로운 이름을 입력 받은 후, 다시 저장해 주었다.

// 저장된 조합의 이름 변경
function changeName(saveName) {
    let newName = "";
    while (!newName || window.localStorage.getItem(newName)) {
        newName = prompt("색 조합 이름을 입력하세요.");
        if (newName === null) {
            break;
        }
    }
    if (newName) {
        window.localStorage.setItem(
            newName,
            window.localStorage.getItem(saveName)
        );
        window.localStorage.removeItem(saveName);
        location.reload();
    }
}

 

삭제할 때

 

 

수정할 때

 

이름 변경 할 때

 

이렇게 계획했던 동작들이 다 끝나고,

다음 글에서는 css를 적용하고 나서의 결과에 대해 다루겠다.

 

 

 

 

 

 

 

글 내용 중, 잘못됐거나 더 알아야 하는 지식이 있다면 댓글로 남겨주시면 감사하겠습니다!

모두 좋은 하루 보내세요:)