[Google Calendar Advanced] localstorage에 task 저장

새로고침에도 task가 유지되게

백엔드는 크게 신경 쓰지 않고 task가 유지되게 진행하려고 한다. 가장 간단한 방법이 웹 스토리지에 task의 리스트를 저장하는 방법인 것 같았다. task를 초기에 생성할 때와 변경될 때마다 스토리지를 새로 저장하는 방법으로 구현했다. 이러면 하나가 변경될 때마다 리스트 전체를 새로 덮어 씌워야 하는 한계가 있을 것이다. 지금 생각난 건데 리스트 전체를 하나의 키로 저장했을 때 이런 문제가 발생한거고 @하나의 task당 하나의 키를 사용한다면 이 문제를 해결 할 수 있을 것 같다. 내일 시도해봐야겠다.

@task가 변경되는 곳곳에 로컬스토리지에 리스트를 갱신하는 코드를 넣으니 코드가 매우 산만해졌다. 좀 더 단순한 구조를 고민해봐야겠다.

// taskControler.js
// ...
if (!localStorage.getItem('taskList')) {
  localStorage.setItem('taskList', JSON.stringify(taskList));
} else {
  taskList = JSON.parse(localStorage.getItem('taskList'));
}

for (let id of Object.keys(taskList)) {
  if (id !== "0" && id !== "taskCount") {
    const taskDOM = getTaskElementDOM(id);
    setEditEvent(taskDOM, taskList, id);
    setDeleteEvent(taskDOM, taskList, id, $taskWrapper);
    $taskWrapper.appendChild(taskDOM.container);
  }
}
// ...

테스크를 관리하는 곳에서 taskList라는 키가 로컬스토리지에 없으면 초기화를 해주고 있다면 taskList 객체를 파싱해서 받아온다.

받아온 taskList 객체의 키를 순회하면서 화면에 뿌려줄 DOM들을 생성하고 이벤트를 등록시켜준다. 이 때 키 값 0은 초기화용 데이터이고 taskCount는 id생성을 위한 값이므로 무시해준다.

이 과정을 좀 더 분리 시켜서 간단하게 만들고 싶다.

// getTaskElement.js
// ...
if (JSON.parse(localStorage.getItem("taskList"))[id].title) {
    $title.value = JSON.parse(localStorage.getItem("taskList"))[id].title;
    $detail.value = JSON.parse(localStorage.getItem("taskList"))[id].detail;
    $deadline.value = JSON.parse(localStorage.getItem("taskList"))[id].deadline;
  }
// ...

taskDOM을 만드는 과정에서 taskList에 해당 id의 title을 체크하고 이미 존재한다면 그것을 사용하는 코드이다. 이 코드에서는 @title은 없지만 detail이 있는 조건에도 초기화를 진행시키는 버그가 있다.