0Pricing
Browser Extensions Development (Chrome & Edge) · Lección

Almacenamiento sincronizado frente a local y cuotas

Elija el área de almacenamiento de Chrome adecuada, comprenda los límites de cuota y gestione de forma fiable los eventos de cambio del almacenamiento.

Almacenamiento sincronizado frente a local y cuotas es una lección gratuita de Browser Extensions Development (Chrome & Edge) en CoddyKit. Esta es la lección 4 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Browser Extensions Development (Chrome & Edge), y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Browser Extensions Development (Chrome & Edge) incluye 4 lecciones en total.

Partes de esta lección aún no han sido traducidas y se muestran en inglés.

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.

Preguntas frecuentes

¿La lección «Almacenamiento sincronizado frente a local y cuotas» es gratis?

Sí — el texto completo de «Almacenamiento sincronizado frente a local y cuotas» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Browser Extensions Development (Chrome & Edge), actualiza a CoddyKit PRO. El curso de Browser Extensions Development (Chrome & Edge) incluye 4 lecciones en total.

¿Qué aprenderé en «Almacenamiento sincronizado frente a local y cuotas»?

Elija el área de almacenamiento de Chrome adecuada, comprenda los límites de cuota y gestione de forma fiable los eventos de cambio del almacenamiento. Practicas Browser Extensions Development (Chrome & Edge) con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar Browser Extensions Development (Chrome & Edge)?

No se requiere experiencia previa. Browser Extensions Development (Chrome & Edge) en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 4 de 4.

¿Cuánto tiempo toma la lección «Almacenamiento sincronizado frente a local y cuotas»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de Browser Extensions Development (Chrome & Edge)?

Sí. Cada lección de Browser Extensions Development (Chrome & Edge) incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

  1. Patrones de mensajería unidireccional
  2. Mensajería bidireccional entre componentes
  3. Uso de la API Chrome Storage
  4. Almacenamiento sincronizado frente a local y cuotas
← Volver a Browser Extensions Development (Chrome & Edge)