Browser Extensions Development (Chrome & Edge) · レッスン

SyncとLocalストレージ、クォータ

適切なChromeストレージ領域を選び、クォータ制限を理解し、ストレージ変更イベントを確実に処理します。

「SyncとLocalストレージ、クォータ」はCoddyKit上の無料Browser Extensions Development (Chrome & Edge)レッスンです。これはレッスン4/4です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これはBrowser Extensions Development (Chrome & Edge)学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Browser Extensions Development (Chrome & Edge)コースには全4レッスンが含まれています。

このレッスンの一部はまだ翻訳されておらず、英語で表示されています。

Two Main Storage Areas

The Chrome storage API offers several areas. The two you use most are storage.local and storage.sync.

local — stays on this device, larger quota
sync — syncs across the user's signed-in browsers, smaller quota

When to Use sync

Use storage.sync for user preferences you want to follow them everywhere, like theme or settings. Keep the data small.

chrome.storage.sync.set({ theme: 'dark', fontSize: 14 })

When to Use local

Use storage.local for larger or device-specific data such as caches, logs, or downloaded content that does not need to sync.

chrome.storage.local.set({ cache: bigObject })

Sync Quota Limits

storage.sync is intentionally small. Roughly: about 100 KB total, 8 KB per item, and a limited number of writes per minute.

Exceeding these throws errors, so plan your data shape.

// Stay well under ~8 KB per key for sync

Local Quota Limits

storage.local allows far more, commonly around 10 MB by default, and the unlimitedStorage permission can raise it. Still avoid storing huge blobs.

{
  "permissions": ["storage", "unlimitedStorage"]
}

Reading Data Back

Both areas read with get. Pass a key, an array of keys, or an object of defaults.

const data = await chrome.storage.sync.get({ theme: 'light' })
console.log(data.theme)

Watching for Changes

The onChanged event fires whenever stored values change, even from another context. Use it to keep your UI in sync.

chrome.storage.onChanged.addListener((changes, area) => {
  if (area === 'sync' && changes.theme) {
    console.log('New theme: ' + changes.theme.newValue)
  }
})

Removing and Clearing

Delete specific keys with remove, or wipe an entire area with clear.

chrome.storage.local.remove('cache')
chrome.storage.sync.clear()

Checking Bytes Used

Use getBytesInUse to see how close you are to the quota before writing more data.

const used = await chrome.storage.sync.getBytesInUse()
console.log(used + ' bytes used')

Handling Write Failures

Sync writes can fail on quota errors. Wrap writes in try/catch and fall back to local storage when sync is full.

try {
  await chrome.storage.sync.set({ big: value })
} catch (e) {
  await chrome.storage.local.set({ big: value })
}

Choosing Wisely

A common pattern: keep small settings in sync, keep everything else in local. Never store secrets like tokens in plain storage, since extension storage is not encrypted.

Quick Check

Test your storage knowledge.

Recap

You compared storage areas:

sync for small cross-device settings
local for larger device data
Respect quotas and check getBytesInUse
React to onChanged
Handle write failures and avoid storing secrets

Picking the right area keeps your data fast, durable, and within limits.

よくある質問

「SyncとLocalストレージ、クォータ」レッスンは無料ですか？

はい。「SyncとLocalストレージ、クォータ」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Browser Extensions Development (Chrome & Edge)コースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Browser Extensions Development (Chrome & Edge)コースには全4レッスンが含まれています。

「SyncとLocalストレージ、クォータ」で何を学びますか？

適切なChromeストレージ領域を選び、クォータ制限を理解し、ストレージ変更イベントを確実に処理します。ブラウザで直接実行するハンズオンコードでBrowser Extensions Development (Chrome & Edge)を演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Browser Extensions Development (Chrome & Edge)を始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのBrowser Extensions Development (Chrome & Edge)は初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。これはレッスン4/4です。

「SyncとLocalストレージ、クォータ」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このBrowser Extensions Development (Chrome & Edge)レッスンでコードを書いて実行できますか？

はい。すべてのBrowser Extensions Development (Chrome & Edge)レッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

← Browser Extensions Development (Chrome & Edge)に戻る