chrome.storage.local と chrome.storage.sync

Chrome拡張機能では、データの保存・取得のために chrome.storage API を使用します。主に以下の2つのストレージエリアがあります。

---

1. chrome.storage.local

概要:

• データをローカルに保存する領域です。

• 保存されたデータは、その拡張機能がインストールされている端末にのみ存在します。

• インターネットに接続していなくても使用可能です。

特徴:

• 保存容量が多い（約5MB以上。理論的には制限なし。ただし上限はブラウザやOSによって異なる）。

• 同期はされないため、複数の端末で同じGoogleアカウントを使っていてもデータは共有されません。

• 書き込みは高速で、大量データに向いています。

使用例:

javascript
// 保存
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);
});

---

2. chrome.storage.sync

概要:

• Googleアカウントに同期されるストレージ領域です。

• 同じアカウントでログインしている他のChromeブラウザに自動的にデータが同期されます。

特徴:

• クロスデバイスで設定や状態を共有したいときに有効です。

• 容量制限が厳しく、1つのアイテムは最大8KB、全体で100KBまで（キーごとの上限やリクエストレート制限もあり）。

• 書き込みに少し時間がかかることがあります。

• 同期はGoogleアカウントがログイン済みで、同期機能が有効なときにのみ機能します。

使用例:

javascript
// 保存
chrome.storage.sync.set({ theme: 'dark' }, function () {
  console.log('Theme is set to dark.');
});

// 取得
chrome.storage.sync.get(['theme'], function (result) {
  console.log('Theme currently is ' + result.theme);
});

---

比較表:

---

補足:

• 両方のAPIは非同期で動作し、Promiseもサポートされます（chrome.storage.local.get().then(...)のように）。

• 実際の使用では、「サイズが大きい・同期不要ならlocal」「設定情報など小さくて同期したいデータはsync」と使い分けるのが一般的です。