Browser Extensions Development (Chrome & Edge) · Pelajaran

Penyimpanan Sinkron vs Lokal dan Kuota

Pilih area penyimpanan Chrome yang tepat, pahami batas kuota, dan tangani peristiwa perubahan penyimpanan dengan andal.

Penyimpanan Sinkron vs Lokal dan Kuota adalah pelajaran Browser Extensions Development (Chrome & Edge) gratis di CoddyKit. Ini adalah pelajaran 4 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Browser Extensions Development (Chrome & Edge), dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Browser Extensions Development (Chrome & Edge) mencakup 4 pelajaran total.

Bagian dari pelajaran ini belum diterjemahkan dan ditampilkan dalam bahasa Inggris.

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.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Penyimpanan Sinkron vs Lokal dan Kuota” gratis?

Ya — teks lengkap “Penyimpanan Sinkron vs Lokal dan Kuota” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Browser Extensions Development (Chrome & Edge), upgrade ke CoddyKit PRO. Kursus Browser Extensions Development (Chrome & Edge) mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Penyimpanan Sinkron vs Lokal dan Kuota”?

Pilih area penyimpanan Chrome yang tepat, pahami batas kuota, dan tangani peristiwa perubahan penyimpanan dengan andal. Kamu berlatih Browser Extensions Development (Chrome & Edge) dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai Browser Extensions Development (Chrome & Edge)?

Tidak diperlukan pengalaman sebelumnya. Browser Extensions Development (Chrome & Edge) di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 4 dari 4.

Berapa lama pelajaran “Penyimpanan Sinkron vs Lokal dan Kuota” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran Browser Extensions Development (Chrome & Edge) ini?

Ya. Setiap pelajaran Browser Extensions Development (Chrome & Edge) menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

← Kembali ke Browser Extensions Development (Chrome & Edge)