Pembangunan Sambungan Pelayar (Chrome & Edge) · Pelajaran

Menggunakan API Storan Chrome

Kekalkan tetapan dan data pengguna dengan selamat serta cekap menggunakan API `chrome.storage` untuk storan setempat dan disegerakkan.

Pelajaran 3 daripada 412 langkah

Menggunakan API Storan Chrome ialah pelajaran Pembangunan Sambungan Pelayar (Chrome & Edge) percuma di CoddyKit. Ini ialah pelajaran 3 daripada 4. Anda boleh membaca keseluruhan pelajaran di bawah secara percuma — kemudian berlatih secara praktikal dalam pelayar menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran Pembangunan Sambungan Pelayar (Chrome & Edge), dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus Pembangunan Sambungan Pelayar (Chrome & Edge) merangkumi sejumlah 4 pelajaran.

Pengenalan kepada API Storan Chrome

Semasa membina sambungan pelayar, anda sering perlu menyimpan data. Data ini mungkin berupa tetapan pengguna, keadaan aplikasi atau maklumat cache.

API chrome.storage menyediakan cara untuk menyimpan data secara kekal, iaitu data tersebut kekal walaupun pelayar ditutup atau sambungan dikemas kini.

Mengapa Menggunakan chrome.storage?

Tidak seperti pemboleh ubah JavaScript biasa, data yang disimpan menggunakan chrome.storage adalah kekal. Berikut ialah sebab API ini pilihan yang baik untuk sambungan:

Kekekalan: Data kekal selepas pelayar ditutup dan merentasi kemas kini.
Keselamatan: Data diasingkan untuk sambungan anda, sekali gus mengelakkan konflik dengan sambungan atau halaman web lain.
Tak segerak: Operasi tidak menyekat utas utama, maka sambungan anda kekal responsif.
Storan Kunci-Nilai: Data mudah disimpan dan diambil sebagai pasangan kunci-nilai ringkas.

Storan Setempat: chrome.storage.local

Kawasan chrome.storage.local direka bentuk untuk menyimpan data yang hanya tersedia pada profil pelayar semasa.

Ia sesuai untuk perkara seperti keutamaan pengguna sementara, kandungan cache atau data khusus untuk satu tika pelayar. Had storan biasanya ialah 5MB.

Storan Segerak: chrome.storage.sync

Untuk data yang mungkin ingin dicapai oleh pengguna pada pelayar atau peranti yang berbeza (jika mereka telah log masuk ke akaun Google), chrome.storage.sync ialah penyelesaiannya.

Data disegerakkan secara automatik merentas semua tika apabila pengguna memasang sambungan anda dan telah log masuk. Had storan adalah lebih kecil, biasanya 100KB, dengan maksimum 8KB bagi setiap item.

storage berbanding localStorage

Anda mungkin biasa dengan localStorage pelayar. Walaupun tujuannya serupa, chrome.storage biasanya lebih sesuai untuk sambungan kerana perbezaan utama berikut:

Tak segerak: chrome.storage adalah tak segerak, manakala localStorage adalah segerak (boleh menyekat antara muka pengguna).
Keselamatan: chrome.storage terhad kepada skop sambungan anda.
Penyegerakan: Hanya chrome.storage.sync menawarkan penyegerakan merentas peranti.
Ketersediaan: chrome.storage berfungsi dalam pekerja perkhidmatan, manakala localStorage tidak.

Menyimpan Data dengan .set()

Untuk menyimpan data, gunakan kaedah .set(). Kaedah ini menerima objek yang kuncinya ialah rentetan dan nilainya boleh berupa apa-apa jenis yang boleh disiri oleh JSON.

Contoh ini menyimpan warna kegemaran pengguna. Kod ini akan dijalankan dalam skrip latar belakang sambungan anda.

/* 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!");
  }
});

Mendapatkan Data dengan .get()

Untuk mendapatkan semula data, gunakan kaedah .get(). Anda boleh menentukan kunci atau menghantar null untuk mendapatkan semua item.

Fungsi panggil balik menerima objek yang mengandungi data yang diminta atau objek kosong jika kunci tersebut tidak ditemui.

/* 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);
});

Mengalih Keluar Data: .remove() dan .clear()

Kadangkala anda perlu memadamkan data yang disimpan. Anda boleh mengalih keluar item tertentu atau mengosongkan semua data untuk sambungan anda.

.remove(keys): Memadamkan satu atau lebih item tertentu.
.clear(): Mengalih keluar semua data daripada kawasan storan untuk sambungan anda.

/* 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!");
//   }
// });

Mendengar Perubahan Storan

Sambungan anda boleh bertindak balas apabila data yang disimpannya berubah menggunakan pendengar peristiwa chrome.storage.onChanged.

Ini berguna jika bahagian sambungan yang berbeza (seperti tetingkap timbul dan skrip latar belakang) perlu mengetahui apabila data dikemas kini.

Pendengar ini memberikan butiran tentang perkara yang berubah (newValue, oldValue) dan kawasan storan yang terlibat (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);

Mengisytiharkan Kebenaran Storan

Untuk menggunakan API chrome.storage, sambungan anda perlu mengisytiharkan kebenaran "storage" dalam fail manifest.json.

Tanpa kebenaran ini, percubaan untuk menggunakan chrome.storage akan gagal dengan ralat dan sambungan anda tidak dapat menyimpan atau mendapatkan data.

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

Semakan Pantas API Storan

Antara pernyataan berikut tentang chrome.storage, yang manakah TRUE?

Jawab dalam pelajaran interaktif

Imbas Kembali: Menguasai Kekekalan Data

Anda telah mempelajari cara mengekalkan data dalam sambungan pelayar menggunakan API chrome.storage!

Kami membincangkan .local untuk data khusus pelayar dan .sync untuk penyegerakan merentas peranti.
Kini anda tahu cara .set(), .get(), .remove() dan .clear() data.
Kami juga meneroka cara bertindak balas terhadap perubahan dengan .onChanged dan kebenaran penting "storage".

Pengetahuan ini penting untuk membina sambungan yang kukuh dan mesra pengguna, yang mengingati keutamaan serta keadaan pengguna.

Percuma untuk bermula

Pelajari JavaScript dengan tutor kecerdasan buatan — percuma

Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.

Kursus: 12
Pelajaran: 48

Mula belajar secara percuma Lihat kursus penuh

Soalan Lazim

Adakah pelajaran “Menggunakan API Storan Chrome” percuma?

Ya — teks penuh “Menggunakan API Storan Chrome” boleh dibaca secara percuma di web ini. Untuk berlatih secara interaktif menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7, serta membuka kunci baki kursus Pembangunan Sambungan Pelayar (Chrome & Edge), tingkat taraf kepada CoddyKit PRO. Kursus Pembangunan Sambungan Pelayar (Chrome & Edge) merangkumi sejumlah 4 pelajaran.

Apakah yang akan saya pelajari dalam “Menggunakan API Storan Chrome”?

Kekalkan tetapan dan data pengguna dengan selamat serta cekap menggunakan API `chrome.storage` untuk storan setempat dan disegerakkan. Anda berlatih Pembangunan Sambungan Pelayar (Chrome & Edge) menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.

Adakah saya memerlukan pengalaman untuk memulakan Pembangunan Sambungan Pelayar (Chrome & Edge)?

Tiada pengalaman terdahulu diperlukan. Pembelajaran Pembangunan Sambungan Pelayar (Chrome & Edge) di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 3 daripada 4.

Berapa lamakah pelajaran “Menggunakan API Storan Chrome” diambil?

Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.

Bolehkah saya menulis dan menjalankan kod dalam pelajaran Pembangunan Sambungan Pelayar (Chrome & Edge) ini?

Ya. Setiap pelajaran Pembangunan Sambungan Pelayar (Chrome & Edge) menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.

Semua pelajaran dalam kursus ini

Corak Pemesejan Sehala
Pemesejan Dua Hala antara Komponen
Menggunakan API Storan Chrome
Storan Segerak berbanding Setempat dan Kuota

← Kembali ke Pembangunan Sambungan Pelayar (Chrome & Edge)