JavaScript Academy · Oppitunti

Datan tallentaminen ja lukeminen

Käyttäkää setItem-, getItem- ja removeItem-metodeja.

Oppitunti 1/413 vaihetta

Datan tallentaminen ja lukeminen on ilmainen JavaScript Academy-oppitunti CoddyKitissä. Tämä on oppitunti 1/4. Voit lukea tästä oppimispolusta kokonaan mitkä tahansa 3 oppituntia ilmaiseksi — sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä käytännön harjoittelun sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Oppitunti kuuluu JavaScript Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. JavaScript Academy-kurssilla on yhteensä 4 oppituntia.

Selaimen avain–arvo-tallennus

Web Storage tarjoaa kullekin originille selaimessa yksinkertaisen avain–arvo-tallennustilan. Kaksi APIa, localStorage ja sessionStorage, käyttävät samoja metodeja ja tallentavat vain merkkijonoja.

Kirjoittaminen setItem-metodilla

Tallentakaa arvo setItem(key, value)-metodilla. Molempien argumenttien on oltava merkkijonoja.

localStorage.setItem("theme", "dark");
localStorage.setItem("username", "ada");

Lukeminen getItem-metodilla

Hakekaa arvo getItem(key)-metodilla. Jos avainta ei ole olemassa, metodi palauttaa arvon null, ei arvoa undefined.

const theme = localStorage.getItem("theme"); // "dark"
const missing = localStorage.getItem("nope"); // null

Ominaisuuksien kautta käyttäminen

Voitte myös lukea ja kirjoittaa arvoja objektin ominaisuuksien tapaan, mutta metodimuoto on selkeämpi ja välttää ristiriidat sisäänrakennettujen nimien kanssa. Suosikaa metodeja.

localStorage.theme = "light";       // works
console.log(localStorage.theme);    // "light"

Yhden kohteen poistaminen

Poistakaa yksittäinen merkintä removeItem(key)-metodilla. Olemattoman avaimen poistaminen ei aiheuta haittaa eikä tee mitään.

localStorage.removeItem("username");

Kaiken tyhjentäminen

clear() poistaa kaikki nykyisen originin avaimet. Käyttäkää sitä varoen, sillä toimintoa ei voi perua.

localStorage.clear();

Kaikki on merkkijonoa

Tallennustila sisältää vain merkkijonoja. Luvut ja totuusarvot muunnetaan tekstiksi. Lukekaa ne takaisin merkkijonoina ja muuntakaa tarvittaessa.

localStorage.setItem("count", 5);
const n = localStorage.getItem("count"); // "5" (string)
const num = Number(n);                    // 5

Avainten laskeminen

length-ominaisuus kertoo tallennettujen avainten määrän, ja key(index) palauttaa kyseisessä kohdassa olevan avaimen nimen. Tämä on hyödyllistä läpikäynnissä.

console.log(localStorage.length);
const firstKey = localStorage.key(0);

Tallennustilan läpikäyminen

Käykää kaikki tallennetut avaimet läpi length- ja key()-metodien avulla. Lukekaa jokainen arvo samalla.

for (let i = 0; i < localStorage.length; i++) {
  const k = localStorage.key(i);
  console.log(k, localStorage.getItem(k));
}

Olemassaolon tarkistaminen

Koska puuttuva avain palauttaa arvon null, voitte tarkistaa olemassaolon yksinkertaisella vertailulla.

if (localStorage.getItem("token") !== null) {
  console.log("user has a token");
}

Vain sama origin

Tallennustila on rajattu originiin (skeema + isäntä + portti). Yksi sivusto ei voi lukea toisen sivuston tallennustilaa, ja http ja https lasketaan eri origineiksi.

Pikatarkistus

Web Storagen lukeminen ja kirjoittaminen.

Vastaa interaktiivisessa oppitunnissa

Kertaus

Web Storage on origin-kohtainen merkkijonojen avain–arvo-tallennustila. Käyttäkää setItem-, getItem- (palauttaa arvon null, jos avain puuttuu), removeItem- ja clear-metodeja. Käykää sisältö läpi length-ominaisuuden ja key(i)-metodin avulla. Kaikki tallennetaan merkkijonoina, joten muuntakaa tyypit itse, ja tallennustila on eristetty origineittain.

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: 59
Oppitunnit: 200

Aloita opiskelu maksutta Näytä koko kurssi

Usein kysytyt kysymykset

Onko oppitunti ”Datan tallentaminen ja lukeminen” ilmainen?

Kyllä — voit lukea täällä verkossa kokonaan ilmaiseksi mitkä tahansa JavaScript Academy-oppimispolun 3 oppituntia, myös oppitunnin “Datan tallentaminen ja lukeminen”. Sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä interaktiiviset harjoitukset sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. JavaScript Academy-kurssilla on yhteensä 4 oppituntia.

Mitä opin oppitunnilla ”Datan tallentaminen ja lukeminen”?

Käyttäkää setItem-, getItem- ja removeItem-metodeja. Harjoittelet JavaScript Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.

Tarvitsenko kokemusta aloittaakseni JavaScript Academy-opiskelun?

Aiempi kokemus ei ole tarpeen. CoddyKitin JavaScript Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 1/4.

Kuinka kauan ”Datan tallentaminen ja lukeminen”-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ä JavaScript Academy-oppitunnilla?

Kyllä. Jokainen JavaScript Academy-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: JavaScript Academy