크롬 익스텐션: chrome.storage API

발생일: 2014.12.31

키워드: chrome.storage, chrome extension, 크롬 익스텐션, 크롬 확장

문제:

크롬 익스텐션에서 로컬 스토리지를 활용하려고 한다.

크롬에 로그인 한 경우, 스토리지를 동기화해서 사용할 수 있다고 알고 있다.

이 참에 스토리지 API도 한 번 정리해두려고 한다.

해결책:

크롬의 스토리지는 localStorage API와 동일하지만, 다음과 같은 특징이 있다.

- `storage.sync`를 사용하면, 자동으로 크롬 간 동기화할 수 있다.

- 컨텐트 스크립트에서 바로 접근해서 사용할 수 있다.

- 시크릿 모드(incognito)에서도 사용자 데이터를 동일하게 사용할 수 있다.

- 읽기/쓰기는 비동기로 동작한다. (동기로 동작해서 다른 스크립트의 실행을 블로킹하는 localStorage API보다 빠르다)

- 사용자 데이터를 객체 단위로 저장할 수 있다. (locatStorage는 문자열만 가능하다)

- 관리자가 `storage.managed`로 설정한 데이터를 읽어올 수 있다.

storage 를 사용하려면, 매니페니트 파일에서 permissions 에 추가해줘야 한다.

      {

        "name": "My extension",

        ...

        "permissions": [

          "storage"

        ],

        ...

      }

사용법

데이터를 저장하려면, `storage.sync`나 `storage.local` 객체를 사용하면 된다.

`storage.sync`를 사용하면, 사용자가 로그인하고 있는 크롬 브라우저 간에 동기화된다.

오프라인인 상태라면 온라인 상태가 되었을 때 동기화한다.

만약 사용자가 동기화 기능을 껐다면, `storage.local`과 동일하게 동작한다.

주의할 점은, 저장소는 암호화되지 않기 때문에 사용자의 개인 정보를 저장하면 안된다는 것이다.

`storage.managed`는 읽기 전용이다.

스토리지와 쓰로틀 제한 (Throttling Limits)

저장할 땐 아래처럼 저장하고, 저장을 완료했을 때 이벤트를 받을 수 있다.

     chrome.storage.sync.set({‘value’: theValue’}, function () {

          // 저장 완료

     });

가져올 땐 `get`을 사용하면 된다.

     chrome.storage.sync.get(‘value’, function (items) {

         // items: 저장한 객체의 key/value

     });

`get`의 키 값으론, 키의 배열이나 저장한 객체를 사용할 수도 있다.

키를 넘기지 않거나 null을 넘기면 저장된 전체 객체를 리턴한다.

스토리지가 변경됐을 때에도 이벤트를 받을 수 있는데,

`chrome.storage`는 버퍼로 동작하기 때문에,

여러 데이터를 연속으로 저장했을 때 한 개의 이벤트에 여러 개의 변경된 정보가 포함되어 있을 수 있다.

     chrome.storage.onChanged.addListener(function (changes, areaName) {

          for (key in changes) {

               var storageChange = changes[key];

               // key: 키 값

               // areaName: ‘sync’ or ‘local'

               // storageChange.oldValue: 이전 값

               // storageChange.newValue: 변경된 값

          }

     });

용량

로컬 저장소는 기본 5MB 까지 저장할 수 있고, `unlimitedStorage` 권한을 주면 무제한으로 사용할 수 있다.

동기화 저장소는 상대적으로 작으며, 최대 100K, 아이템 당 8K, 최대 아이템 개수 512개 등으로 제한되어 있다.

자세한 건 https://developer.chrome.com/apps/storage 를 참고하면 된다.