Electron-työpöytäsovellusten kehitys · Oppitunti

Paikallinen tallennus ja IndexedDB

Hyödyntäkää selaimen kaltaisia tallennusmekanismeja, kuten `localStorage`- ja `IndexedDB`-ratkaisuja, asiakaspuolen tietojen säilytykseen Electron-sovelluksessanne.

Oppitunti 1/311 vaihetta

Paikallinen tallennus ja IndexedDB on ilmainen Electron-työpöytäsovellusten kehitys-oppitunti CoddyKitissä. Tämä on oppitunti 1/3. Voit lukea koko oppitunnin alta ilmaiseksi ja harjoitella sen jälkeen käytännössä selaimessa sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla. Oppitunti kuuluu Electron-työpöytäsovellusten kehitys-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. Electron-työpöytäsovellusten kehitys-kurssilla on yhteensä 3 oppituntia.

Tietojen tallentaminen Electron-sovelluksissa

Työpöytäsovelluksia Electronilla rakennettaessa sinun on usein tallennettava käyttäjätietoja tai sovelluksen asetuksia. Tätä kutsutaan nimellä tietojen pysyvyys.

Palvelimiin tukeutuvista verkkosovelluksista poiketen Electron-sovellukset voivat tallentaa tietoja suoraan käyttäjän tietokoneelle. Tällä oppitunnilla tutustutaan kahteen yleiseen, selaimista tuttuun tallennusmenetelmään: localStorage ja IndexedDB.

Web Storage API:n esittely

Electronin renderöintiprosessit ovat pohjimmiltaan verkkoselaimia. Siksi voit käyttää tietojen tallentamiseen tavallisia selaimen ohjelmointirajapintoja, kuten Web Storage API:a.

Web Storage API tarjoaa kaksi päätyyppiä:

localStorage: Tallentaa tiedot ilman vanhenemispäivää.
sessionStorage: Tallentaa tiedot vain selainistunnon ajaksi.

Keskitymme localStorage-tallennukseen pysyviä tietoja varten.

localStoragen ymmärtäminen

localStorage mahdollistaa tietojen tallentamisen yksinkertaisina avain–arvo-pareina. Ajattele sitä pienenä paikallisena sanakirjana.

Säilyvyys: localStorage-tallennustilaan tallennetut tiedot säilyvät, vaikka sovellus suljetaan ja avataan uudelleen.
Laajuus: Tiedot ovat alkuperäkohtaisia (sovelluksesi verkkotunnuksen mukaan; Electronissa yleensä file://).
Kapasiteetti: Rajoitettu yleensä noin 5–10 megatavuun alkuperää kohden.

Se sopii erinomaisesti pienille tietomäärille, kuten käyttäjän asetuksille tai yksinkertaisille määrityksille.

Tietojen tallentaminen localStoragella

Voit tallentaa tietoja localStorage-tallennustilaan käyttämällä setItem()-metodia. Muista, että arvot tallennetaan aina merkkijonoina.

Kokeile suorittaa tämä esimerkki renderer-prosessissa:

/* This code runs in the Electron renderer process. */

const username = "CoddyKitUser";
localStorage.setItem("userName", username);

const userSettings = {
  theme: "dark",
  notifications: true
};
// Objects need to be converted to JSON strings
localStorage.setItem("appSettings", JSON.stringify(userSettings));

console.log("Data saved to localStorage!");

localStorage-tietojen hakeminen ja poistaminen

Voit hakea tiedot takaisin käyttämällä getItem()-metodia. Poistamiseen käytetään removeItem()-metodia. Jos tallensit olion, sinun on muunnettava se takaisin JSON-muodosta.

Suorita tämä koodikatkelma edellisen jälkeen:

/* This code runs in the Electron renderer process. */

const storedUsername = localStorage.getItem("userName");
console.log("Stored Username:", storedUsername);

const storedSettingsString = localStorage.getItem("appSettings");
if (storedSettingsString) {
  const storedSettings = JSON.parse(storedSettingsString);
  console.log("Stored Theme:", storedSettings.theme);
}

// To remove an item:
localStorage.removeItem("userName");
console.log("Username removed.");

// To clear all localStorage for the origin:
// localStorage.clear();

localStoragen rajoitukset

Helppokäyttöisyydestään huolimatta localStorage-tallennustilalla on joitakin rajoituksia:

Kokorajoitus: Yleensä 5–10 megatavua alkuperää kohden. Ei sovellu suurille tietojoukoille.
Vain merkkijonot: Kaikki tiedot tallennetaan merkkijonoina. Oliot ja taulukot on sarjoitettava (esimerkiksi JSON.stringify()-metodilla) ja deserialisoitava (JSON.parse()-metodilla) erikseen.
Synkronisuus: Toiminnot estävät pääsäikeen toiminnan, mikä voi jäädyttää käyttöliittymän, jos tallennat tai haet paljon tietoja.
Ei indeksointia tai kyselyitä: Tietoja ei voi hakea suoraan kyselyillä, vaan niihin pääsee käsiksi vain avaimen avulla.

IndexedDB:n esittely

Suuremmille, jäsennellymmille ja monimutkaisemmille tietomäärille IndexedDB on tehokas vaihtoehto. Se on matalan tason ohjelmointirajapinta suurten jäsenneltyjen tietomäärien tallentamiseen asiakaspuolella.

Ei kokorajoitusta: Yleensä käytettävissä oleva levytila on ainoa rajoitus.
Jäsennellyt tiedot: JavaScript-objekteja voi tallentaa suoraan, ei ainoastaan merkkijonoja.
Asynkroninen: Toiminnot eivät estä käyttöliittymäsäiettä, joten se sopii suorituskyvyn kannalta kriittisiin sovelluksiin.

IndexedDB:n keskeiset käsitteet

IndexedDB käyttää muutamia keskeisiä käsitteitä:

Tietokannat: Luot tietokantoja, joilla kullakin on nimi ja versio.
Oliovarastot: Ne muistuttavat relaatiotietokannan tauluja, mutta tallentavat JavaScript-olioita. Jokaisella oliovarastolla on avainpolku.
Indeksit: Niitä käytetään oliovaraston tietojen nopeaan kyselyyn.
Transaktiot: Kaikkien luku- ja kirjoitustoimintojen on tapahduttava transaktion sisällä tietojen eheyden varmistamiseksi.
Asynkronisuus: Toiminnot palauttavat IDBRequest-olioita, jotka valmistuvat success- tai error-tapahtumilla (tai Promiseilla).

IndexedDB:n perusmääritykset

IndexedDB:n käyttöönotto edellyttää tietokannan avaamista ja oliovarastojen määrittämistä. Tämä tehdään yleensä renderer-prosessissa.

Tässä esimerkissä avataan tietokanta ja luodaan oliovarasto, jos sitä ei vielä ole:

/* This code runs in the Electron renderer process. */

const request = indexedDB.open("CoddyKitDB", 1); // DB name, version

request.onerror = (event) => {
  console.error("Database error:", event.target.errorCode);
};

request.onsuccess = (event) => {
  const db = event.target.result;
  console.log("Database opened successfully!");
  // You can now interact with the database (add/get data)
  db.close(); // Close when done if not actively using
};

request.onupgradeneeded = (event) => {
  // This runs if the database didn't exist or version changed
  const db = event.target.result;
  const objectStore = db.createObjectStore("users", { keyPath: "id" });
  console.log("Object store 'users' created.");
  // You can also create indexes here
  objectStore.createIndex("name", "name", { unique: false });
};

Nopea tallennustilan kertaus

Olet tutustunut localStorage-tallennustilaan ja IndexedDB:hen. Mikä väittämistä kuvaa oikein niiden keskeisen eron?

Vastaa interaktiivisessa oppitunnissa

Kertaus: localStorage ja IndexedDB

Hienoa työtä! Olet tutustunut Electronin asiakaspuolen tietojen säilyttämiseen:

localStorage on yksinkertainen, synkroninen avain–arvo-tallennusratkaisu pienille ja ei-kriittisille tietomäärille.
IndexedDB on tehokas, asynkroninen ja transaktioita tukeva tietokanta suurille määrille jäsenneltyä tietoa.

Valinta niiden välillä riippuu tietojen koosta, rakenteesta ja suorituskykyvaatimuksista. Molemmat ovat tärkeitä rakennettaessa vankkoja Electron-sovelluksia, jotka tallentavat käyttäjän tietoja paikallisesti.

Aloita maksutta

Opi JavaScript tekoälytuutorin avulla — ilmaiseksi

Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.

Kurssit: 12
Oppitunnit: 47

Aloita opiskelu maksutta Näytä koko kurssi

Usein kysytyt kysymykset

Onko oppitunti ”Paikallinen tallennus ja IndexedDB” ilmainen?

Kyllä – oppitunnin ”Paikallinen tallennus ja IndexedDB” koko tekstin voi lukea täällä verkossa ilmaiseksi. Jos haluat harjoitella interaktiivisesti sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla sekä avata koko Electron-työpöytäsovellusten kehitys-kurssin, päivitä CoddyKit PROhon. Electron-työpöytäsovellusten kehitys-kurssilla on yhteensä 3 oppituntia.

Mitä opin oppitunnilla ”Paikallinen tallennus ja IndexedDB”?

Hyödyntäkää selaimen kaltaisia tallennusmekanismeja, kuten `localStorage`- ja `IndexedDB`-ratkaisuja, asiakaspuolen tietojen säilytykseen Electron-sovelluksessanne. Harjoittelet Electron-työpöytäsovellusten kehitys-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.

Tarvitsenko kokemusta aloittaakseni Electron-työpöytäsovellusten kehitys-opiskelun?

Aiempi kokemus ei ole tarpeen. CoddyKitin Electron-työpöytäsovellusten kehitys-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 1/3.

Kuinka kauan ”Paikallinen tallennus ja IndexedDB”-oppitunnin suorittaminen kestää?

Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.

Voinko kirjoittaa ja suorittaa koodia tällä Electron-työpöytäsovellusten kehitys-oppitunnilla?

Kyllä. Jokainen Electron-työpöytäsovellusten kehitys-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.

Kaikki tämän kurssin oppitunnit

← Takaisin: Electron-työpöytäsovellusten kehitys