크롬 익스텐션 개발기(3) : storage

우리 프로그램은 유저의 로그인 여부를 파악하는 것이 중요하였다.

그래서 브라우저의 local storage와, chrome extension storage를 사용하였다.

 

local storage를 사용하게 되면 개인 pc의 브라우저에 저장되기 때문에, 컴퓨터를 껐다 켜도 값이 유지되어 있었다.

저장된 값을 확인하는 방법은 윈도우의 경우 F12를 누르거나, 그 외의 경우 마우스 우클릭을 한 뒤,

→검사→Application→Storage의 localstorage 항목을 확인하면 된다.

또한 여기서 특정 항목을 선택하여 그것의 key나 value 값을 변경할 수 있다.

 

사용을 위한 코드는 다음과 같다. 

// local storage에 특정 key와 그에 대한 value 저장하기
localstorage.setItem("key", "value")

// local storage에 특정 key에 대한 value 가져오기
localstorage.getItem("key")

// local storage에 저장되어 있는 특정 key와 그에 대한 value 삭제하기
localstorage.removeItem("key")

 

먼저 chrome extension의 storage를 사용하기 위해서는 manifest 파일의 permission부분에 storage 권한을 추가해야 한다.

"permissions": [
        "storage"
],

 

chrome extension의 storage의 경우 local, sync의 2가지 타입이 있었다.

두 경우의 차이점은 이 블로그에 자세하게 설명되어 있다.

gyuyeon.tistory.com/6

[확장프로그램 개발]데이터 저장하기 - chrome.storage

 

사용방법은 다음과 같다.

//chrome.storage.sync.get('key', callbackfunction())
chrome.storage.sync.get('defaultnewtab', storage => {
      if (storage.defaultnewtab) {
        chrome.tabs.update({ url: 'chrome-search://local-ntp/local-ntp.html' });
      }
});