JavaScript Academy · Oppitunti

Storage-tapahtumat ja rajoitukset

Reagoikaa muutoksiin ja noudattakaa kiintiörajoja.

Oppitunti 4/413 vaihetta

Storage-tapahtumat ja rajoitukset on ilmainen JavaScript Academy-oppitunti CoddyKitissä. Tämä on oppitunti 4/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.

Reagointi tallennuksen muutoksiin

storage-tapahtuman avulla yksi välilehti voi reagoida, kun toinen välilehti muuttaa localStorage-tallennusta. Sen avulla välilehtien välinen synkronointi on helppoa.

storage-tapahtumien kuuntelu

Lisätkää kuuntelija kohteelle window. Se suoritetaan saman originin MUISSA välilehdissä aina, kun localStorage muuttuu, mutta ei muutoksen tehneessä välilehdessä.

window.addEventListener("storage", (e) => {
  console.log("Key changed:", e.key);
});

StorageEvent-objekti

Tapahtuma sisältää kentät key, oldValue, newValue, storageArea ja url. Yhdessä ne kuvaavat tarkasti, mitä muuttui.

window.addEventListener("storage", (e) => {
  console.log(e.key, e.oldValue, "->", e.newValue);
});

Suoritetaan vain muissa välilehdissä

Yksi tärkeä yksityiskohta: tapahtumaa EI suoriteta samassa välilehdessä, jossa kutsuttiin setItem-metodia. Sen tarkoitus on ilmoittaa muutoksesta muille välilehdille, joten älkää luottako siihen saman välilehden päivityksissä.

Välilehtien välisen synkronoinnin malli

Käyttäkää tapahtumaa välilehtien tilan yhtenäisenä pitämiseen. Voitte esimerkiksi kirjata käyttäjän ulos kaikkialta, kun yksi välilehti poistaa todennustunnisteen.

window.addEventListener("storage", (e) => {
  if (e.key === "token" && e.newValue === null) {
    logoutUI();
  }
});

clear()-kutsun tunnistaminen

Kun clear() suoritetaan, tapahtuman key-arvoksi asetetaan null. Käsitelkää tämä tapaus kaiken tilan nollaamiseksi.

window.addEventListener("storage", (e) => {
  if (e.key === null) resetApp();
});

Tallennuskiintiö

Jokaisella originilla on rajallinen tallennuskiintiö, yleensä noin 5MB yhteensä localStoragea varten. Se on paljon pienempi kuin IndexedDB, joten tallentakaa vain kohtuullisia tietomääriä.

Kiintiön ylitysvirheet

Kiintiön ylittäminen aiheuttaa QuotaExceededError-virheen kutsuttaessa setItem-metodia. Ympäröikää suuret tai epäluotetut kirjoitusoperaatiot aina try/catch-rakenteella.

try {
  localStorage.setItem("big", hugeString);
} catch (e) {
  console.log("Storage full:", e.name);
}

UTF-16 käyttää kaksi kertaa enemmän tilaa

Merkkijonot tallennetaan UTF-16-muodossa, joten jokainen merkki käyttää noin 2 tavua. 5MB:n kiintiöön mahtuu noin 2,5 miljoonaa merkkiä, ja ASCII-merkistöön kuulumattomille teksteille vähemmän.

Käytön arvioiminen

Voitte mitata käytön likimääräisesti laskemalla avainten ja arvojen pituudet yhteen. Tarkkaa APIa ei ole, mutta tämä antaa käyttökelpoisen arvion.

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

Milloin tarvitaan suurempi tallennusratkaisu

Käyttäkää muutaman megatavun rajan ylittäville suurille tai rakenteisille tietomäärille IndexedDB:tä. Web Storage sopii parhaiten pienille lipuille, asetuksille ja tunnisteille.

Pikakertaus

Tallennustapahtumat ja rajoitukset.

Vastaa interaktiivisessa oppitunnissa

Kertaus

storage-tapahtuma ilmoittaa originin MUILLE välilehdille localStoragen muutoksista ja sisältää kentät key, oldValue ja newValue (key on null, kun tallennus tyhjennetään). Kiintiö on noin 5MB, ja sen ylittävä kirjoitus aiheuttaa QuotaExceededError-virheen. Ympäröikää riskialttiit kirjoitukset try/catch-rakenteella ja käyttäkää suuremmille tietomäärille IndexedDB:tä.

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 ”Storage-tapahtumat ja rajoitukset” ilmainen?

Kyllä — voit lukea täällä verkossa kokonaan ilmaiseksi mitkä tahansa JavaScript Academy-oppimispolun 3 oppituntia, myös oppitunnin “Storage-tapahtumat ja rajoitukset”. 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 ”Storage-tapahtumat ja rajoitukset”?

Reagoikaa muutoksiin ja noudattakaa kiintiörajoja. 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 4/4.

Kuinka kauan ”Storage-tapahtumat ja rajoitukset”-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