Utvikling av nettleserutvidelser (Chrome og Edge) · leksjon

Bruke Chrome Storage API

Lagre brukerinnstillinger og data sikkert og effektivt ved hjelp av API-et `chrome.storage` for lokal og synkronisert lagring.

Leksjon 3 av 412 trinn

Bruke Chrome Storage API er en gratis leksjon i Utvikling av nettleserutvidelser (Chrome og Edge) på CoddyKit. Dette er leksjon 3 av 4. Du kan lese hele leksjonen gratis nedenfor – og deretter øve praktisk i nettleseren med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i Utvikling av nettleserutvidelser (Chrome og Edge), og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i Utvikling av nettleserutvidelser (Chrome og Edge) inneholder totalt 4 leksjoner.

Introduksjon til Chrome Storage API

Når De utvikler nettleserutvidelser, trenger De ofte å lagre data. Det kan være brukerinnstillinger, programtilstand eller bufret informasjon.

chrome.storage-API-et gjør det mulig å lagre data permanent, slik at de bevares selv etter at nettleseren lukkes eller utvidelsen oppdateres.

Hvorfor bruke chrome.storage?

I motsetning til vanlige JavaScript-variabler er data som lagres med chrome.storage, permanente. Her er grunnene til at dette er et godt valg for utvidelser:

Permanent lagring: Dataene bevares etter at nettleseren lukkes, og gjennom oppdateringer.
Sikkerhet: Dataene er isolert til utvidelsen, slik at konflikter med andre utvidelser eller nettsider unngås.
Asynkronitet: Operasjonene blokkerer ikke hovedtråden, slik at utvidelsen forblir responsiv.
Nøkkel-verdi-lager: Det er enkelt å lagre og hente data som enkle nøkkel-verdi-par.

Lokal lagring: chrome.storage.local

Området chrome.storage.local er laget for data som bare skal være tilgjengelige i den gjeldende nettleserprofilen.

Det passer godt for midlertidige brukerinnstillinger, bufret innhold eller data som gjelder én bestemt nettleserinstans. Lagringsgrensen er vanligvis 5 MB.

Synkronisert lagring: chrome.storage.sync

For data som brukere ønsker å få tilgang til fra ulike nettlesere eller enheter (hvis de er logget på Google-kontoen sin), er chrome.storage.sync løsningen.

Dataene synkroniseres automatisk på tvers av alle instanser der brukeren har installert utvidelsen og er logget på. Lagringsgrensen er mindre, vanligvis 100 kB, med maksimalt 8 kB per element.

storage kontra localStorage

De kjenner kanskje til nettleserens localStorage. Selv om formålet er lignende, foretrekkes chrome.storage vanligvis for utvidelser på grunn av viktige forskjeller:

Asynkronitet: chrome.storage er asynkront, mens localStorage er synkront og kan blokkere brukergrensesnittet.
Sikkerhet: chrome.storage er avgrenset til utvidelsen.
Synkronisering: Bare chrome.storage.sync tilbyr synkronisering på tvers av enheter.
Tilgjengelighet: chrome.storage fungerer i service workers, mens localStorage ikke gjør det.

Lagre data med .set()

Bruk metoden .set() for å lagre data. Den tar et objekt der nøklene er strenger, og verdiene kan være alle typer som kan serialiseres som JSON.

Dette eksempelet lagrer brukerens favorittfarge. Koden kjøres i utvidelsens bakgrunnsskript.

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

Hente data med .get()

Bruk metoden .get() for å hente data. De kan angi nøkler eller sende null for å hente alle elementer.

Callback-funksjonen mottar et objekt som inneholder de forespurte dataene, eller et tomt objekt hvis nøkkelen ikke ble funnet.

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

Fjerne data: .remove() og .clear()

Noen ganger må De slette lagrede data. De kan fjerne bestemte elementer eller slette alle dataene for utvidelsen.

.remove(keys): Sletter ett eller flere bestemte elementer.
.clear(): Fjerner alle data fra utvidelsens lagringsområde.

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

Lytte etter endringer i lagringen

Utvidelsen kan reagere når lagrede data endres, ved hjelp av hendelseslytteren chrome.storage.onChanged.

Dette er nyttig hvis ulike deler av utvidelsen, for eksempel en popup og et bakgrunnsskript, må vite når data blir oppdatert.

Lytteren oppgir detaljer om hva som ble endret (newValue, oldValue) og i hvilket lagringsområde (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);

Deklarere lagringstillatelsen

For å bruke chrome.storage-API-et må utvidelsen deklarere tillatelsen "storage" i filen manifest.json.

Uten denne tillatelsen vil forsøk på å bruke chrome.storage mislykkes med en feil, og utvidelsen kan ikke lagre eller hente data.

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

Kort test av Storage API

Hvilke av de følgende påstandene om chrome.storage er SANNE?

Besvar den i den interaktive leksjonen

Oppsummering: Få kontroll på permanent datalagring

De har lært å lagre data permanent i nettleserutvidelser ved hjelp av chrome.storage-API-et!

Vi har gått gjennom .local for nettleserspesifikke data og .sync for synkronisering på tvers av enheter.
De vet nå hvordan De kan bruke .set(), .get(), .remove() og .clear() på data.
Vi har også sett på hvordan De kan reagere på endringer med .onChanged og den viktige tillatelsen "storage".

Dette er viktig kunnskap for å bygge robuste og brukervennlige utvidelser som husker brukerens innstillinger og tilstander.

Gratis å komme i gang

Lær deg JavaScript med en AI-veileder – gratis

Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.

Kurs: 12
Leksjoner: 48

Start læringen gratis Se hele kurset

Ofte stilte spørsmål

Er leksjonen «Bruke Chrome Storage API» gratis?

Ja – hele teksten i «Bruke Chrome Storage API» er gratis å lese her på nettet. For å øve interaktivt med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt, og for å låse opp resten av Utvikling av nettleserutvidelser (Chrome og Edge)-kurset, kan du oppgradere til CoddyKit PRO. Kurset i Utvikling av nettleserutvidelser (Chrome og Edge) inneholder totalt 4 leksjoner.

Hva lærer jeg i «Bruke Chrome Storage API»?

Lagre brukerinnstillinger og data sikkert og effektivt ved hjelp av API-et `chrome.storage` for lokal og synkronisert lagring. Du øver på Utvikling av nettleserutvidelser (Chrome og Edge) med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.

Trenger jeg erfaring for å begynne med Utvikling av nettleserutvidelser (Chrome og Edge)?

Ingen tidligere erfaring er nødvendig. Utvikling av nettleserutvidelser (Chrome og Edge) på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 3 av 4.

Hvor lang tid tar leksjonen «Bruke Chrome Storage API»?

De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.

Kan jeg skrive og kjøre kode i denne Utvikling av nettleserutvidelser (Chrome og Edge)-leksjonen?

Ja. Alle Utvikling av nettleserutvidelser (Chrome og Edge)-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.

Alle leksjonene i dette kurset

Mønstre for enveismeldinger
Toveismeldinger mellom komponenter
Bruke Chrome Storage API
Synkronisert kontra lokal lagring og kvoter

← Tilbake til Utvikling av nettleserutvidelser (Chrome og Edge)