Udvikling af browserudvidelser til Chrome og Edge · Lektion

Brug af Chrome Storage API

Gem brugerindstillinger og data sikkert og effektivt ved hjælp af `chrome.storage` API til lokal og synkroniseret lagring.

Lektion 3 af 412 trin

Brug af Chrome Storage API er en gratis Udvikling af browserudvidelser til Chrome og Edge-lektion på CoddyKit. Dette er lektion 3 af 4. Du kan læse hele lektionen gratis nedenfor — og derefter øve dig praktisk i browseren med en indbygget kodeeditor og en AI-vejleder, der er tilgængelig døgnet rundt. Den er en del af læringsforløbet i Udvikling af browserudvidelser til Chrome og Edge, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. Udvikling af browserudvidelser til Chrome og Edge-kurset indeholder 4 lektioner i alt.

Introduktion til Chrome Storage API

Når du udvikler browserudvidelser, har du ofte brug for at gemme data. Det kan være brugerindstillinger, applikationstilstand eller cachelagrede oplysninger.

chrome.storage-API'en gør det muligt at gemme data permanent, hvilket betyder, at de bevares, selv efter browseren lukkes, eller udvidelsen opdateres.

Hvorfor bruge chrome.storage?

I modsætning til almindelige JavaScript-variabler er data, der gemmes med chrome.storage, permanente. Her er grunden til, at det er et godt valg til udvidelser:

Bestandighed: Data bevares, efter browseren lukkes, og på tværs af opdateringer.
Sikkerhed: Dataene er isoleret til din udvidelse, så konflikter med andre udvidelser eller websider forhindres.
Asynkron: Handlinger blokerer ikke hovedtråden, så din udvidelse forbliver responsiv.
Nøgle-værdi-lager: Det er nemt at gemme og hente data som simple nøgle-værdi-par.

Lokal lagring: chrome.storage.local

Området chrome.storage.local er beregnet til data, der kun skal være tilgængelige i den aktuelle browserprofil.

Det er ideelt til f.eks. midlertidige brugerindstillinger, cachelagret indhold eller data, der er specifikke for én browserinstans. Lagergrænsen er typisk 5 MB.

Synkroniseret lagring: chrome.storage.sync

Hvis brugere skal kunne få adgang til data på tværs af forskellige browsere eller enheder (hvis de er logget ind på deres Google-konto), er chrome.storage.sync løsningen.

Data synkroniseres automatisk på tværs af alle instanser, hvor brugeren har installeret din udvidelse og er logget ind. Lagergrænsen er mindre, typisk 100 KB, med højst 8 KB pr. element.

storage sammenlignet med localStorage

Du kender måske browserens localStorage. Selvom formålet ligner hinanden, foretrækkes chrome.storage generelt til udvidelser på grund af nogle vigtige forskelle:

Asynkron: chrome.storage er asynkron, mens localStorage er synkron og kan blokere brugergrænsefladen.
Sikkerhed: chrome.storage er afgrænset til din udvidelse.
Synkronisering: Kun chrome.storage.sync tilbyder synkronisering på tværs af enheder.
Tilgængelighed: chrome.storage fungerer i service workers, mens localStorage ikke gør.

Gem data med .set()

Brug metoden .set() til at gemme data. Den tager et objekt, hvor nøglerne er strenge, og værdierne kan være alle JSON-serialiserbare typer.

Dette eksempel gemmer en brugers yndlingsfarve. Denne kode ville køre i din udvidelses baggrundsscript.

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

Hent data med .get()

Brug metoden .get() til at hente data igen. Du kan angive nøgler eller sende null for at hente alle elementer.

Callback-funktionen modtager et objekt, der indeholder de ønskede data, eller et tomt objekt, hvis nøglen ikke blev fundet.

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

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

Nogle gange har du brug for at slette gemte data. Du kan fjerne bestemte elementer eller rydde alle data for din udvidelse.

.remove(keys): Sletter et eller flere bestemte elementer.
.clear(): Fjerner alle data fra lagerområdet for din udvidelse.

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

Lyt efter ændringer i lagringen

Din udvidelse kan reagere, når dens gemte data ændres, ved hjælp af hændelseslytteren chrome.storage.onChanged.

Det er nyttigt, hvis forskellige dele af din udvidelse (f.eks. en popup og et baggrundsscript) skal vide, hvornår data opdateres.

Lytteren giver oplysninger om, hvad der blev ændret (newValue, oldValue), og i hvilket lagerområ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);

Angiv lagerstilladelsen

For at bruge chrome.storage-API'en skal din udvidelse angive tilladelsen "storage" i filen manifest.json.

Uden denne tilladelse mislykkes forsøg på at bruge chrome.storage med en fejl, og din udvidelse kan ikke gemme eller hente data.

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

Hurtig test af Storage API

Hvilke af følgende udsagn om chrome.storage er SANDE?

Besvar den i den interaktive lektion

Opsummering: Bliv fortrolig med permanent datalagring

Du har lært at gemme data permanent i dine browserudvidelser ved hjælp af chrome.storage-API'en!

Vi gennemgik .local til browserspecifikke data og .sync til synkronisering på tværs af enheder.
Du ved nu, hvordan du bruger .set(), .get(), .remove() og .clear() til data.
Vi så også på, hvordan du reagerer på ændringer med .onChanged og den afgørende tilladelse "storage".

Denne viden er vigtig, når du bygger robuste og brugervenlige udvidelser, der husker brugerindstillinger og tilstande.

Gratis at komme i gang

Lær JavaScript med en AI-underviser — gratis

Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.

Kurser: 12
Lektioner: 48

Start gratis Se hele kurset

Ofte stillede spørgsmål

Er lektionen “Brug af Chrome Storage API” gratis?

Ja — hele teksten til “Brug af Chrome Storage API” kan læses gratis her på nettet. Hvis du vil øve dig interaktivt med en indbygget kodeeditor og en AI-vejleder døgnet rundt og få adgang til resten af Udvikling af browserudvidelser til Chrome og Edge-kurset, skal du opgradere til CoddyKit PRO. Udvikling af browserudvidelser til Chrome og Edge-kurset indeholder 4 lektioner i alt.

Hvad lærer jeg i “Brug af Chrome Storage API”?

Gem brugerindstillinger og data sikkert og effektivt ved hjælp af `chrome.storage` API til lokal og synkroniseret lagring. Du øver dig i Udvikling af browserudvidelser til Chrome og Edge med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.

Skal jeg have erfaring for at begynde på Udvikling af browserudvidelser til Chrome og Edge?

Der kræves ingen tidligere erfaring. Udvikling af browserudvidelser til Chrome og Edge på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 3 af 4.

Hvor lang tid tager lektionen “Brug af Chrome Storage API”?

De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.

Kan jeg skrive og køre kode i denne Udvikling af browserudvidelser til Chrome og Edge-lektion?

Ja. Alle Udvikling af browserudvidelser til Chrome og Edge-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.

Alle lektioner i dette kursus

Mønstre for envejsmeddelelser
Tovejsmeddelelser mellem komponenter
Brug af Chrome Storage API
Synkroniseret kontra lokal lagring og kvoter

← Tilbage til Udvikling af browserudvidelser til Chrome og Edge