0Pricing
Browser Extensions Development (Chrome & Edge) · Lekcja

Korzystanie z Chrome Storage API

Przechowuj ustawienia i dane użytkowników bezpiecznie oraz wydajnie, korzystając z interfejsu API `chrome.storage` do przechowywania lokalnego i synchronizowanego.

Korzystanie z Chrome Storage API to bezpłatna lekcja Browser Extensions Development (Chrome & Edge) na CoddyKit. To lekcja 3 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Browser Extensions Development (Chrome & Edge), a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Browser Extensions Development (Chrome & Edge) zawiera 4 lekcji w sumie.

Części tej lekcji nie zostały jeszcze przetłumaczone i są wyświetlane po angielsku.

Intro to Chrome Storage API

When building browser extensions, you often need to save data. This could be user settings, application state, or cached information.

The chrome.storage API provides a way to store data persistently, meaning it stays even after the browser closes or the extension is updated.

Why Use chrome.storage?

Unlike regular JavaScript variables, data stored with chrome.storage is persistent. Here's why it's a great choice for extensions:

  • Persistence: Data remains after the browser closes and across updates.
  • Security: It's isolated to your extension, preventing conflicts with other extensions or web pages.
  • Asynchronous: Operations don't block the main thread, keeping your extension responsive.
  • Key-Value Store: Easy to store and retrieve data as simple key-value pairs.

Local Storage: chrome.storage.local

The chrome.storage.local area is designed for storing data that should only be available on the current browser profile.

It's ideal for things like temporary user preferences, cached content, or data specific to one browser instance. The storage limit is typically 5MB.

Sync Storage: chrome.storage.sync

For data that users might want to access across different browsers or devices (if they are logged into their Google account), chrome.storage.sync is the solution.

It automatically syncs data across all instances where the user has your extension installed and is logged in. The storage limit is smaller, typically 100KB, with a maximum of 8KB per item.

storage vs. localStorage

You might be familiar with the browser's localStorage. While similar in purpose, chrome.storage is generally preferred for extensions due to key differences:

  • Asynchronous: chrome.storage is async, localStorage is sync (can block UI).
  • Security: chrome.storage is scoped to your extension.
  • Syncing: Only chrome.storage.sync offers cross-device syncing.
  • Availability: chrome.storage works in service workers, localStorage does not.

Saving Data with .set()

To save data, use the .set() method. It takes an object where keys are strings and values can be any JSON-serializable type.

This example saves a user's favorite color. This code would run in your extension's background script.

/* This code would typically run in your background.js */
/* (manifest.json would declare it as a service_worker) */

// Save a single item to local storage
chrome.storage.local.set({ 'favoriteColor': 'blue' }, function() {
  if (chrome.runtime.lastError) {
    console.error("Error saving color: ", chrome.runtime.lastError);
  } else {
    console.log("Favorite color saved!");
  }
});

// Save multiple items to sync storage
chrome.storage.sync.set({
  'userName': 'Coddy',
  'darkMode': true
}, function() {
  if (chrome.runtime.lastError) {
    console.error("Error saving user settings: ", chrome.runtime.lastError);
  } else {
    console.log("User settings saved to sync!");
  }
});

Retrieving Data with .get()

To get data back, use the .get() method. You can specify keys, or pass null to get all items.

The callback function receives an object containing the requested data, or an empty object if the key isn't found.

/* This code would typically run in your background.js */

// Get a single item from local storage
chrome.storage.local.get('favoriteColor', function(data) {
  const color = data.favoriteColor;
  if (color) {
    console.log("Your favorite color is: " + color);
  } else {
    console.log("Favorite color not set locally.");
  }
});

// Get multiple items from sync storage
chrome.storage.sync.get(['userName', 'darkMode'], function(data) {
  const userName = data.userName || 'Guest';
  const darkMode = data.darkMode || false;
  console.log(`Hello, ${userName}! Dark mode: ${darkMode}`);
});

// Get all items from local storage (use with caution for large data)
chrome.storage.local.get(null, function(data) {
  console.log("All local storage data:", data);
});

Removing Data: .remove() & .clear()

Sometimes you need to delete stored data. You can remove specific items or clear all data for your extension.

  • .remove(keys): Deletes one or more specific items.
  • .clear(): Removes all data from the storage area for your extension.
/* This code would typically run in your background.js */

// Remove a single item from local storage
chrome.storage.local.remove('favoriteColor', function() {
  if (chrome.runtime.lastError) {
    console.error("Error removing color: ", chrome.runtime.lastError);
  } else {
    console.log("Favorite color removed from local storage.");
  }
});

// Remove multiple items from sync storage
chrome.storage.sync.remove(['userName', 'darkMode'], function() {
  if (chrome.runtime.lastError) {
    console.error("Error removing settings: ", chrome.runtime.lastError);
  } else {
    console.log("User settings removed from sync storage.");
  }
});

// Clear all data from local storage (use with extreme caution!)
// chrome.storage.local.clear(function() {
//   if (chrome.runtime.lastError) {
//     console.error("Error clearing local storage: ", chrome.runtime.lastError);
//   } else {
//     console.log("Local storage cleared!");
//   }
// });

Listening for Storage Changes

Your extension can react when its stored data changes using the chrome.storage.onChanged event listener.

This is useful if different parts of your extension (like a popup and a background script) need to know when data is updated.

The listener provides details about what changed (newValue, oldValue) and in which storage area (local, sync).

/* This code would typically run in your background.js */

chrome.storage.onChanged.addListener(function(changes, areaName) {
  console.log("Storage area '" + areaName + "' changed.");
  for (let [key, { oldValue, newValue }] of Object.entries(changes)) {
    console.log(
      `Key "${key}" changed. ` +
      `Old value was "${oldValue}", new value is "${newValue}".`
    );
  }
});

// To demonstrate, let's change a value after a short delay
setTimeout(() => {
  chrome.storage.local.set({'favoriteColor': 'green'}, function() {
    if (!chrome.runtime.lastError) {
      console.log("Color updated to trigger onChanged listener.");
    }
  });
}, 2000);

Declaring the Storage Permission

To use the chrome.storage API, your extension needs to declare the "storage" permission in its manifest.json file.

Without this permission, attempts to use chrome.storage will fail with an error, and your extension won't be able to save or retrieve data.

{
  "manifest_version": 3,
  "name": "My Storage Extension",
  "version": "1.0",
  "permissions": [
    "storage"
  ],
  "background": {
    "service_worker": "background.js"
  }
}

Storage API Quick Check

Which of the following statements about chrome.storage are TRUE?

Recap: Mastering Data Persistence

You've learned how to persist data in your browser extensions using the chrome.storage API!

  • We covered .local for browser-specific data and .sync for cross-device syncing.
  • You now know how to .set(), .get(), .remove(), and .clear() data.
  • We also explored reacting to changes with .onChanged and the crucial "storage" permission.

This knowledge is vital for building robust and user-friendly extensions that remember user preferences and states.

Często zadawane pytania

Czy lekcja „Korzystanie z Chrome Storage API” jest bezpłatna?

Tak — pełny tekst „Korzystanie z Chrome Storage API” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Browser Extensions Development (Chrome & Edge), przejdź na CoddyKit PRO. Kurs Browser Extensions Development (Chrome & Edge) zawiera 4 lekcji w sumie.

Co nauczysz się w „Korzystanie z Chrome Storage API”?

Przechowuj ustawienia i dane użytkowników bezpiecznie oraz wydajnie, korzystając z interfejsu API `chrome.storage` do przechowywania lokalnego i synchronizowanego. Ćwiczysz Browser Extensions Development (Chrome & Edge) z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć Browser Extensions Development (Chrome & Edge)?

Nie wymagamy żadnego doświadczenia. Browser Extensions Development (Chrome & Edge) w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 3 z 4.

Ile czasu zajmuje lekcja „Korzystanie z Chrome Storage API”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji Browser Extensions Development (Chrome & Edge)?

Tak. Każda lekcja Browser Extensions Development (Chrome & Edge) zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

  1. Wzorce komunikacji jednokierunkowej
  2. Komunikacja dwukierunkowa między komponentami
  3. Korzystanie z Chrome Storage API
  4. Pamięć sync a local i limity
← Powrót do Browser Extensions Development (Chrome & Edge)