MyTime - 크롬 익스텐션 만들기 - 9 (storage API)

그 동안 일정을 추가하는 기능을 만들었다. 그래서 날짜를 변경하여 다른 날짜에도 일정을 추가하고, 추가로 일정을 수정, 삭제하는 기능을 만들고, 이를 chrome storage API를 이용해서 저장, 불러오는 기능을 함께 만들었다.

---

날짜 변경

<, > 버튼을 눌러서 날짜를 변경할 수 있게 만들었다. 헤더의 날짜 뿐 아니라, 왼쪽의 날짜들도 변경된다.

---

일정 수정

수정 버튼을 눌러서 일정을 수정할 수 있도록 했다.

---

일정 삭제

삭제 버튼을 눌러서 일정을 삭제할 수 있도록 했다. 삭제 버튼을 누르면 confirm 창이 나타나고 정말 삭제할 지 물어본 후에 삭제 되도록 만들었다.

---

chrome storage API

크롬 스토리지를 이용해서 데이터를 저장, 삭제하는 기능을 구현했다. 크롬 스토리지를 사용하기 위해서는 우선 manifest.json을 수정해서 권한을 설정해 주어야 한다.

"permissions": [ "storage" ]

그리고 chrome.storage.sync.set 함수를 사용해서 데이터를 저장한다. 오브젝트를 생성할 때 key값을 동적으로 생성할 수 없기 때문에 items[DATE]로 동적으로 키를 만들어준다.

const setData = () => {
    let items = {};
    items[DATE] = data;

    chrome.storage.sync.set(items, () => {
        console.log(items, '저장 되었습니다.');
    });
}

데이터를 가져올 때에는 chrome.storage.sync.get 함수를 이용해서 가져온다. 위의 set함수와 get함수 모두 비동기 함수이므로 가져온 데이터를 사용 할 때에는 콜백함수를 이용한다.

const getData = (date) => {
    chrome.storage.sync.get(date, (items) => {
        data = items[date] || getInitData();

        console.log(date, items[date]);

        drawBox();
    })
};

---

결과