0Pricing
Browser Extensions Development (Chrome & Edge) · Урок

Использование API Chrome Storage

Надёжно и эффективно сохраняйте пользовательские настройки и данные с помощью API `chrome.storage`, поддерживающего локальное хранение и синхронизацию.

«Использование API Chrome Storage» — бесплатный урок Browser Extensions Development (Chrome & Edge) на CoddyKit. Это урок 3 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Browser Extensions Development (Chrome & Edge), и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Browser Extensions Development (Chrome & Edge) содержит 4 уроков всего.

Части этого урока еще не переведены и отображаются на английском.

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.

Часто задаваемые вопросы

Урок «Использование API Chrome Storage» бесплатный?

Да — полный текст урока «Использование API Chrome Storage» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Browser Extensions Development (Chrome & Edge), подпишись на CoddyKit PRO. Курс Browser Extensions Development (Chrome & Edge) содержит 4 уроков всего.

Чему я научусь в уроке «Использование API Chrome Storage»?

Надёжно и эффективно сохраняйте пользовательские настройки и данные с помощью API `chrome.storage`, поддерживающего локальное хранение и синхронизацию. Ты практикуешь Browser Extensions Development (Chrome & Edge) с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать Browser Extensions Development (Chrome & Edge)?

Предыдущий опыт не требуется. Browser Extensions Development (Chrome & Edge) на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 3 из 4.

Сколько времени занимает урок «Использование API Chrome Storage»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке Browser Extensions Development (Chrome & Edge)?

Да. Каждый урок Browser Extensions Development (Chrome & Edge) включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

  1. Односторонние шаблоны обмена сообщениями
  2. Двунаправленный обмен сообщениями между компонентами
  3. Использование API Chrome Storage
  4. Синхронное и локальное хранилища и квоты
← Назад к Browser Extensions Development (Chrome & Edge)