Tietojen hakeminen, asettaminen ja poistaminen
Lue ja kirjoita tietoja Web Storage API:lla
Tietojen hakeminen, asettaminen ja poistaminen on ilmainen HTML Academy-oppitunti CoddyKitissä. Tämä on oppitunti 2/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 HTML Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. HTML Academy-kurssilla on yhteensä 4 oppituntia.
Storage API:n tarjoama rajapinta
Sekä localStorage että sessionStorage tarjoavat samat neljä keskeistä metodia: getItem(key), setItem(key, value), removeItem(key) ja clear(). Ne ovat selaimen ylläpitämiä yksinkertaisia avain–arvo-tietovarastoja.
setItem tallentaa merkkijonoja
localStorage.setItem("theme", "dark") tallentaa merkkijonon avaimella "theme". Sekä avaimen että arvon on oltava merkkijonoja – muut kuin merkkijonoarvot muunnetaan String()-funktion avulla ennen tallennusta, mikä voi muuntaa objektit ja taulukot huomaamatta käyttökelvottomaan muotoon.
localStorage.setItem("theme", "dark");
localStorage.setItem("count", "42");Objektien tallentaminen JSON-muodossa
Jäsennelty data tallennetaan sarjoittamalla se JSON-muotoon: localStorage.setItem("user", JSON.stringify(user)). Lue data takaisin: const user = JSON.parse(localStorage.getItem("user")). Kääri jäsennys aina try/catch-rakenteeseen siltä varalta, että tallennettu arvo on virheellinen.
const user = { name: "Ada", age: 30 };
localStorage.setItem("user", JSON.stringify(user));
const loaded = JSON.parse(localStorage.getItem("user"));getItem palauttaa merkkijonon tai null-arvon
getItem("missing") palauttaa null, jos avainta ei ole olemassa – ei koskaan arvoa undefined. Käytä nullish coalescing -operaattoria oletusarvon määrittämiseen: const theme = localStorage.getItem("theme") ?? "light".
Ominaisuuksien käyttösyntaksi
Voit käyttää myös hakasulku- ja pistemerkintää: localStorage.theme = "dark" ja localStorage["theme"]. Molemmat toimivat, mutta niiden tarkoitus jää epäselvemmäksi. Suosi eksplisiittisiä metodikutsuja, jotka ilmaisevat selvästi kyseessä olevan pysyvä tietovarasto eivätkä objektin ominaisuus.
removeItem ja clear
localStorage.removeItem("theme") poistaa yhden avaimen. localStorage.clear() poistaa kaikki nykyisen originin avaimet. clear() on tuhoisa toiminto – älä kutsu sitä ilman painavaa syytä, sillä se poistaa kaikkien sivulla toimivien skriptien tallentamat tiedot.
Tallennettujen avainten läpikäynti
Kaikki tallennetut avaimet voi käydä läpi käyttämällä localStorage.length-ominaisuutta ja localStorage.key(index)-metodia tai levittämällä Object.keys(localStorage)-kutsun tuloksen. Tämä on hyödyllistä migraatioissa, vianjäljityksessä ja etuliitteeseen perustuvassa siivouksessa, kuten kaikkien merkkijonolla "cache:" alkavien avainten poistamisessa.
for (let i = 0; i < localStorage.length; i++) {
const key = localStorage.key(i);
console.log(key, localStorage.getItem(key));
}Kiintiön ylitysvirheet
Selaimet varaavat noin 5–10 Mt tilaa originia kohden. Kiintiön ylittäminen aiheuttaa QuotaExceededError-virheen. Kääri setItem try/catch-rakenteeseen, kun tallennettavat arvot voivat olla suuria, kuten kuvavälimuistit tai asiakirjaluonnokset, jotta virhe ei kaada sovellusta.
try {
localStorage.setItem("draft", largeString);
} catch (e) {
if (e.name === "QuotaExceededError") {
// free space, warn user, or fall back
}
}Avainten nimiavaruudet
Tietovarasto on jaettu koko originin kesken. Käytä avainten etuliitteenä sovelluksen tai ominaisuuden nimeä, kuten app:settings tai cart:items, jotta samalla originilla toimivat muut skriptit, kolmannen osapuolen kirjastot ja selainlaajennukset eivät aiheuta nimiristiriitoja.
Synkroninen ja estävä toiminta
Storage API on täysin synkroninen: jokainen kutsu estää pääsäiettä, kunnes levyn I/O-operaatio valmistuu. Vältä erittäin suurten möykkyjen tallentamista ja setItem-kutsuja tiukoissa silmukoissa. Kokoa päivitykset sen sijaan yhdeksi sarjoitetuksi objektiksi.
sessionStorage ja localStorage
Sama rajapinta, erilainen elinkaari. sessionStorage tyhjennetään välilehden sulkeutuessa, kun taas localStorage säilyy selaimen uudelleenkäynnistysten yli. Valitse sessionStorage väliaikaiselle ohjatun toiminnon tilalle ja localStorage käyttäjän asetuksille, joiden pitäisi säilyä sivun lataamisen jälkeen.
Tietojen tarkistus
Mitä localStorage.getItem("missing-key") palauttaa, jos avainta ei ole koskaan asetettu?
Yhteenveto
getItem, setItem, removeItem ja clear ovat Web Storagen neljä peruspilaria. Arvot ovat aina merkkijonoja, joten jäsennelty data kannattaa kääriä JSON-muotoon. Varaudu null-arvoihin ja QuotaExceededError-virheeseen sekä käytä avainten nimiavaruuksia, jotta samaa originia voidaan jakaa hallitusti muiden skriptien kanssa.
Opi HTML 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
- 40
- Oppitunnit
- 159
Usein kysytyt kysymykset
Onko oppitunti ”Tietojen hakeminen, asettaminen ja poistaminen” ilmainen?
Kyllä — voit lukea täällä verkossa kokonaan ilmaiseksi mitkä tahansa HTML Academy-oppimispolun 3 oppituntia, myös oppitunnin “Tietojen hakeminen, asettaminen ja poistaminen”. Sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä interaktiiviset harjoitukset sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. HTML Academy-kurssilla on yhteensä 4 oppituntia.
Mitä opin oppitunnilla ”Tietojen hakeminen, asettaminen ja poistaminen”?
Lue ja kirjoita tietoja Web Storage API:lla Harjoittelet HTML Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.
Tarvitsenko kokemusta aloittaakseni HTML Academy-opiskelun?
Aiempi kokemus ei ole tarpeen. CoddyKitin HTML Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 2/4.
Kuinka kauan ”Tietojen hakeminen, asettaminen ja poistaminen”-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ä HTML Academy-oppitunnilla?
Kyllä. Jokainen HTML 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
- localStorage vastaan sessionStorage
- Tietojen hakeminen, asettaminen ja poistaminen
- Storage-tapahtumien kuunteleminen
- Tietoturva: mitä tallennukseen ei pidä koskaan tallentaa