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

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

“원하는 색을 추가했으면 해당 색 조합 저장하기”

 

이번 기회에 localStorage을 다루고 싶어서 데이터를 localStorage에 담아보기로 했다.

 

localStorage와 관련된 글은 따로 빼서 정리한 다음 링크를 걸어둘 예정이다.

 

// localStorage에 저장할 색 조합 개수와 이름 제한
function saveColor() {
    // 저장 가능한 색 조합의 수는 30개
    if (window.localStorage.length < 30) {
        let saveCheck = confirm("색 조합을 저장하시겠습니까?");
        if (saveCheck) {
            let saveName = "";
            let temp = 0; // 중복된 이름을 입력 받았을 경우에 글귀 변경 목적
            while (!saveName || window.localStorage.getItem(saveName)) {
                if (!temp) saveName = prompt("색 조합 이름을 입력하세요.");
                else
                    saveName = prompt(
                        "중복 이름입니다.\n색 조합 이름을 입력하세요."
                    );

                if (saveName === null) break;
                else if (saveName === "") temp = 0;
                else temp = 1;
            }
            if (saveName) {
                save(saveName);
            }
        }
    } else {
        alert("더 이상 저장할 수 없습니다.\n최대 개수는 30개 입니다.");
    }
}
// localStorage에 저장할 색 조합 개수와 이름 제한
function save(saveName) {
    let colors = [];
    for (let i = 0; i < colorArr.length; i++) {
        colors[i] = colorArr[i].hex;
    }
    window.localStorage.setItem(saveName, JSON.stringify(colors));

    alert("저장되었습니다.");
    init();
}

// 저장 후 초기 상태로 돌아가기 위한 함수
function init() {
    document.getElementById("color-value").value = "#000000";
    document.getElementsByClassName("clr-field")[0].style.color = "#000000";
    document.getElementById("color-name").innerHTML = null;
    document.getElementById("color-palette").innerHTML = null;
    let color_input = document.getElementById("color-input");
    // 입력 폼의 두번째 버튼을 삭제하기 위함
    if (color_input.childNodes.length >= 6) {
        for (let i = 0; i < color_input.childNodes.length - 4; i++) {
            color_input.removeChild(color_input.childNodes[5]);
        }
    }

    colorArr = [];
}

여기서 중요한 것은 localStorage에는 문자열로 저장이 되기 때문에 배열을 JSON.stringify로 변경 후 저장해줘야 했다.

 

저장 버튼을 눌렀을 때

 

색 조합 이름을 입력받는 폼

 

 

localStorage에 저장된 모습

 

 

이렇게 구현 동작 5번이 끝나고, 다음은 구현 동작 6번이다.

“저장한 색 조합을 보기”

 

localStorage에 있는 값을 가져오는 건 쉽지만, html 틀을 만드는 것은 꽤나 번거로운 일이었다.

우선 조합이 보여질 부분을 먼저 html로 작성했다.

<div id="combinations">
    <p>나의 조합</p>
    <div id="article">

    </div>
</div>

index.html 코드는 이렇지만, 저장한 것을 불러올 때마다 새로운 컨테이너를 만들어서 id가 article인 div에 삽입하려고 한다.

<div class="saving-box">
    <div class="saving-name">
        <p></p>
    </div>
    <div class="saving-combination">
        <div class="saving-color"></div>
        <div class="saving-color"></div>
        <div class="saving-color"></div>
        <div class="saving-color"></div>
        <div class="saving-color"></div>
        <div class="saving-color"></div>
    </div>
    <div class="saving-info">
        <ol>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ol>
    </div>
    <div class="saving-btn">
        <button class="saving-delete">삭제</button>
        <button class="saving-update">수정</button>
    </div>
</div>

class 이름이 saving-box인 div가 조합들이 실질적으로 저장되는 부분이다.

조합이 추가될 때마다 이 div는 id가 article인 div안에 추가되어야 한다.

즉, 이 코드를 js로 짜서 삽입하는 것이다.. 뭔가 비효율적일 것 같은 느낌적인 느낌이다..

 

// html에 필요한 요소들 생성
function createBox() {
    let box = document.createElement("div");
    box.classList.add("saving-box");
    let name = document.createElement("div");
    name.classList.add("saving-name");
    let comb = document.createElement("div");
    comb.classList.add("saving-combination");
    let info = document.createElement("div");
    info.classList.add("saving-information");
    let ol = document.createElement("ol");
    ol.classList.add("saving-ol");

    let btn = document.createElement("div");
    btn.classList.add("saving-btn");

    return [box, name, comb, info, ol, btn];
}

// 실질적으로 localStorage에 있는 값들 출력
function printArticleDetail(saveName) {
    let value = JSON.parse(window.localStorage.getItem(saveName));

    let elementArr = createBox();
    let _box = elementArr[0];
    let _name = elementArr[1];
    let _comb = elementArr[2];
    let _info = elementArr[3];
    let _ol = elementArr[4];
    let _btn = elementArr[5];

    let _p = document.createElement("p");
    _p.textContent = saveName;
    _name.insertAdjacentElement("beforeend", _p);

    for (let i = 0; i < value.length; i++) {
        let _div = document.createElement("div");
        _div.classList.add("saving-color");
        _div.style.backgroundColor = value[i];
        _comb.insertAdjacentElement("beforeend", _div);

        let _li = document.createElement("li");
        _li.textContent = value[i];
        _ol.insertAdjacentElement("beforeend", _li);
    }

    let _del = document.createElement("button");
    _del.classList.add("saving-delete");
    _del.textContent = "삭제";
    _del.setAttribute("onclick", "deleteSave('" + saveName + "')");
    let _upd = document.createElement("button");
    _upd.classList.add("saving-update");
    _upd.textContent = "수정";
    _upd.setAttribute("onclick", "updateSave('" + saveName + "')");
    let _cha = document.createElement("button");
    _cha.classList.add("saving-change");
    _cha.textContent = "이름변경";
    _cha.setAttribute("onclick", "changeName('" + saveName + "')");

    _btn.insertAdjacentElement("beforeend", _del);
    _btn.insertAdjacentElement("beforeend", _upd);
    _btn.insertAdjacentElement("beforeend", _cha);

    _info.insertAdjacentElement("beforeend", _ol);
    _box.insertAdjacentElement("beforeend", _name);
    _box.insertAdjacentElement("beforeend", _comb);
    _box.insertAdjacentElement("beforeend", _info);
    _box.insertAdjacentElement("beforeend", _btn);

    document
        .getElementById("article")
        .insertAdjacentElement("beforeend", _box);
}

html요소를 생성하기 위해 createElement와 insertAdjacentElement를 쓰게 됐다.

appendChild를 써도 되긴 하는데 구글에 검색해 보니 createElement와 insertAdjacentElement의 조합이 가장 좋다고 한다.

 

 

역시 이 부분에 대한 글은 따로 빼서 정리한 다음 링크를 걸어둘 예정이다.

 

 

저장하면 저장한 값이 출력되도록 만들어 주었다.

// localStorage에 저장할 색 조합 개수와 이름 제한
function save(saveName) {
    let colors = [];
    for (let i = 0; i < colorArr.length; i++) {
        colors[i] = colorArr[i].hex;
    }
    window.localStorage.setItem(saveName, JSON.stringify(colors));

    alert("저장되었습니다.");
    // 값을 저장하면 해당 값 추가로 출력
    printArticleDetail(saveName);
    init();
}

(추가)

페이지에 접속하면 지금까지 저장한 값들을 볼 수 있도록 초기에 저장한 값을 불러오는 코드를 짜야한다.

// 페이지를 접속했을 때 저장된 값이 다 출력되어 있도록 설정
function showSaved() {
    let num = window.localStorage.length;
    if (num >= 1) {
        for (let i = 0; i < num; i++) {
            let key = window.localStorage.key(i);
            printArticleDetail(key);
        }
    }
}
showSaved();

localStorage의 모든 key값을 찾고, 찾은 key값을 통해 printArticleDetail() 함수를 통해 출력시켰다.

 

출력된 결과

 

 

성공적으로 구현 동작 6번을 끝냈다.

다음 글에서 마지막 구현 동작 7번을 끝낼 예정이다.

 

 

 

 

 

 

 

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

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