Chrome.storage

Chrome extension 개발 시 chrome.storage 를 사용하여 사용자 데이터에 대한 변경사항을 저장, 검색 및 추적할 수 있다.

Overview

chrome storage 는 아래처럼 조금 다른점을 제외하고는 localStrage API 와 거의 동일한 기능을 제공

• 사용자 데이터는 storage.sync 를 사용하여 Chrome 과 자동으로 동기화 가능하다.
• 데이터는 객체로 저장할 수 있다. (localStorage API 는 데이터를 문자열로 저장한다.)
• 읽기 및 쓰기 작업을 비동기로 처리하여 빠르다.
• extension 콘텐츠 스크립트는 background page 없이도 사용자 데이터에 직접 접근할 수 있다.
• 시크릿 모드 incognito 사용중에도 user 의 extension settings 는 유지될 수 있다.
• 관리자가 'storage.managed' 로 설정한 데이터도 읽어올 수 있다.

Manifest

무튼..! storage 사용을 위해서 manifest 설정은 아래와 같다.

{
  "name": "My extension",
  ...
  "permissions": [
    "storage"
  ],
  ...
}

permissions 에 "storage" 를 추가!

Usage

storage.sync 를 사용해서 아래와 같이 사용할 수 있다.

chrome.storage.sync.set({key: value}, function() {
  console.log('Value is set to ' + value);
});

chrome.storage.sync.get(['key'], function(result) {
  console.log('Value currently is ' + result.key);
});

storage.local 를 사용해서는 아래와 같이 사용할 수 있다.

chrome.storage.local.set({key: value}, function() {
  console.log('Value is set to ' + value);
});

chrome.storage.local.get(['key'], function(result) {
  console.log('Value currently is ' + result.key);
});

그럼 여기서! sync 와 local 두가지로 set 과 get 을 사용할 수 있는데 뭐가 다를까?!
Chrome 이 오프라인 상태일 때 Chrome 은 데이터를 로컬에 저장한다. 다음에 브라우저가 온라인 상태가 되면 Chrome은 데이터를 동기화 한다.
사용자가 동기화를 비활성화 하더라도 저장, 동기화가 계속 작동한다. 이 경우 storage.local과 동일하게 작동한다.
local 은 기본적으로 최대 5MB 까지 저장 가능한데 manifest 파일의 'unlimitedStorage' 를 permission 에 추가해주면 용량 제한 없이 저장이 가능하다.
반면 sync 는

• 전체 용량제한 : 100KB
• 항목당 용량제한 : 8KB
• 항목 수 제한 : 최대 512개
• 1시간 당 set, remove, clear 사용 제한 : 1800회
• 1분 당 set, remove, clear 사용 제한 : 120회

와 같은 제약사항이 있다. 비교적 storage.local 보다 빡빡한 느낌...😭

Warning!!
chrome storage 에도 localStorage와 마찬가지로 유저 정보나, 기밀 정보를 저장해서는 안된다. (개발자라면 누구나 다 알겠죠..? 그쵸...?😏)

Examples

아래처럼 데이터 변경 내용을 추적하려는 경우 변경 시 이벤트리스너를 추가할 수 있다. 스토리지에 변화가 있을 때마다 해당 이벤트가 발생하는 것 이다.

chrome.storage.onChanged.addListener(function(changes, namespace) {
  for (var key in changes) {
    var storageChange = changes[key];
    console.log('Storage key "%s" in namespace "%s" changed. ' +
                'Old value was "%s", new value is "%s".',
                key,
                namespace,
                storageChange.oldValue,
                storageChange.newValue);
  }
});

이외에 storage 관련 메소드들은 StorageArea 에서 확인할 수 있다. (remove 도 있다..!)