LocalStorage-mekanismi tarjoaa eräänlaisen verkkotallennusobjektin, jonka avulla voit tallentaa ja hakea tietoja selaimessa. Voit tallentaa ja käyttää tietoja ilman vanhenemista; tiedot ovat saatavilla myös sen jälkeen, kun vierailija sulkee sivustosi.

Käytät tavallisesti localStoragea JavaScriptin avulla. Pienellä koodimäärällä voit rakentaa esimerkkiprojektin, kuten pistelaskurin. Tämä näyttää, kuinka voit tallentaa ja käyttää pysyviä tietoja käyttämällä vain asiakaspuolen koodia.

Mikä on JavaScriptin localStorage?

LocalStorage-objekti on osa verkkotallennussovellusliittymää, jota useimmat verkkoselaimet tukevat. Voit tallentaa tietoja avain-arvo-pareina käyttämällä localStoragea. Yksilöllisten avainten ja arvojen tulee olla UTF-16 DOM-merkkijonomuodossa.

Jos haluat tallentaa objekteja tai taulukoita, sinun on muunnettava ne merkkijonoiksi käyttämällä JSON.stringify() menetelmä. Voit tallentaa paikalliseen tallennustilaan enintään 5 Mt tietoa. Lisäksi kaikki ikkunat, joilla on sama alkuperä, voivat jakaa kyseisen sivuston paikallisen tallennustilan tiedot.

instagram viewer

Selain ei poista näitä tietoja, vaikka käyttäjä sulkee sen. Se on sen luoneen verkkosivuston käytettävissä minkä tahansa tulevan istunnon aikana. Älä kuitenkaan käytä localStoragea arkaluonteisille tiedoille, koska muut samalla sivulla toimivat komentosarjat voivat käyttää sitä.

localStorage vs. sessionStorage

The localStorage ja sessionStorage objektit ovat osa Web Storage API: ta, joka tallentaa avainarvoparit paikallisesti. Kaikki nykyaikaiset selaimet tukevat niitä molempia. LocalStoragella tiedot eivät vanhene, vaikka käyttäjä sulkee selaimensa. Tämä eroaa sessionStoragesta, joka tyhjentää tiedot sivuistunnon päättyessä. Sivuistunto päättyy, kun suljet välilehden tai ikkunan.

Tässä projektissa käytetty koodi on saatavilla a GitHub-arkisto ja sen käyttö on ilmaista MIT-lisenssin alaisena. Jos haluat nähdä live-version pistelaskuriprojektista, voit katsoa live-lähetyksen demo.

Kuinka localStorage toimii?

Voit käyttää localStorage-toimintoa käyttämällä Window.localStorage omaisuutta. Tämä ominaisuus tarjoaa useita menetelmiä, kuten setItem(), getItem() ja removeItem(). Voit käyttää näitä avain/arvo-parien tallentamiseen, lukemiseen ja poistamiseen.

Kuinka tallentaa tietoja localStorageen

Voit tallentaa tietoja localStorageen käyttämällä setItem() menetelmä. Tämä menetelmä hyväksyy kaksi argumenttia, avaimen ja vastaavan arvon.

window.localStorage.setItem('Python', 'Guido van Rossum');

Tässä, Python on avain ja Guido van Rossum on arvo. Jos haluat tallentaa taulukon tai objektin, sinun on muunnettava se merkkijonoksi. Voit muuntaa taulukon tai objektin merkkijonoksi käyttämällä JSON.stringify() menetelmä.

ikkuna.localStorage.setItem('Python', 'Guido van Rossum');
konst opiskelija = {
 nimi: "Yuvraj",
 merkit: 85,
 aihe: "Koneoppiminen"
}
konst pisteet = [76, 77, 34, 67, 88];
ikkuna.localStorage.setItem('result', JSON.stringify (opiskelija));
ikkuna.localStorage.setItem('marks', JSON.stringify (tulokset));

Kuinka lukea tietoja paikallisesta tallennustilasta

Voit lukea tietoja localStoragesta käyttämällä getItem() menetelmä. Tämä menetelmä hyväksyy avaimen parametriksi ja palauttaa arvon merkkijonona.

päästää data1 = ikkuna.localStorage.getItem('Python');
päästää data2 = ikkuna.localStorage.getItem('result');
konsoli.log (data1);
konsoli.log (data2);

Tämä tuottaa seuraavan tuloksen:

Guido van Rossum
{"nimi":"Yuvraj","merkit":85,"aihe":"Koneoppiminen"}

Jos haluat muuntaa tuloksen merkkijonosta objektiksi, käytä JSON.parse() menetelmä.

päästää data2 = JSON.jäsentää(ikkuna.localStorage.getItem('result'));
konsoli.log (data2);

LocalStorage-istuntojen poistaminen

Voit poistaa localStorage-istuntoja käyttämällä Poista esine() menetelmä. Sinun on välitettävä avain parametrina tälle menetelmälle, jotta voit poistaa avain-arvo-parin. Jos avain on olemassa, menetelmä poistaa avain-arvo-parin ja jos avainta ei ole olemassa, menetelmä ei tee mitään.

window.localStorage.removeItem('Python');
window.localStorage.removeItem('C++');

Kuinka tyhjentää kaikki kohteet localStoragessa

Voit tyhjentää kaikki paikallisessa tallennustilassa olevat kohteet käyttämällä asia selvä() menetelmä. Sinun ei tarvitse siirtää mitään parametria tälle menetelmälle.

ikkuna.paikallinen varasto.asia selvä();

Kuinka löytää paikallisen tallennustilan pituus

Voit selvittää paikallisen tallennustilan pituuden käyttämällä localStorage.length omaisuutta.

päästää len = localStorage.length;
konsoli.log (len);

Kuinka saada avain tiettyyn paikkaan

Voit saada avaimen tiettyyn asentoon käyttämällä avain() menetelmä. Tämä menetelmä hyväksyy indeksin parametriksi.

päästää d = localStorage.key(1);
konsoli.log (d);

Key()-menetelmää käytetään ensisijaisesti kaikkien localStoragen kohteiden läpikäymiseen.

Kuinka kiertää kaikki paikallisen tallennustilan kohteet

Voit iteroida kaikkia localStoragen kohteita käyttämällä for-silmukkaa.

varten (päästää minä = 0; i < localStorage.length; i++){
päästää avain = localStorage.key (i);
päästää arvo = localStorage.getItem (avain);
konsoli.log (avain, arvo);
}

Key()-menetelmä hyväksyy indeksin argumenttina ja palauttaa vastaavan avaimen. GetItem()-metodi hyväksyy avaimen argumenttina ja palauttaa vastaavan arvon. Lopuksi, console.log() menetelmä tulostaa avain-arvo-parin.

Yksinkertainen JavaScript-projekti, joka perustuu paikalliseen tallennustilaan

Ymmärtämällä sen perusmenetelmät voit kehittyä yksinkertainen JavaScript-projekti perustuu paikalliseen tallennustilaan. Tässä projektissa luot tuloslaskurisovelluksen, joka lisää ja vähentää pistemäärää napin painalluksen mukaan. Lisäksi otat käyttöön toiminnon kaikkien kohteiden tyhjentämiseksi localStoragessa.

Luo an index.html ja script.js tiedosto uuteen kansioon ja avaa tiedostot suosikkikoodieditorissasi. Käytä seuraavaa HTML-koodia luodaksesi käyttöliittymän tuloslaskurisovellukselle:

<!DOCTYPE html>
<html>
<kehon>
<h1>localStorage JavaScriptissä</h1>
<painike onclick="nouseLaskuri()" tyyppi="-painiketta">Lisää pisteitä</button>
<painike onclick="vähennäLaskuri()" tyyppi="-painiketta">Pienennä pisteitä</button>
<painike onclick="clearCounter()" tyyppi="-painiketta">Tyhjennä paikallinen tallennustila</button>
<s>Pisteet:</s>
<p id="pisteet"></s>
<s>Klikkaa "Lisää pisteitä" -painiketta lisätäksesi pistemäärää</s>
<s>Klikkaa "Pienennä pisteitä" -painiketta vähentääksesi pistemäärää</s>
<s>Klikkaa "Tyhjennä paikallinen tallennustila" -painiketta paikallisen tallennustilan tyhjentämiseksi</s>
<s>
 Voit sulkea selaimen välilehden (tai ikkuna), ja yrittää uudelleen.
 Näet, että tiedot säilyvät edelleen jaOnei hävinnyt sulkemisen jälkeenkin
 selaimessa.
</s>
<komentosarja src="script.js"></script>
</body>
</html>

Tällä sivulla on kolme painiketta: Lisää pisteitä, Pienennä pisteitä, ja Tyhjennä paikallinen tallennustila. Nämä painikkeet kutsuvat nouseLaskuri(), vähennäLaskuri(), ja clearCounter() toimintoja vastaavasti. Käytä seuraavaa koodia lisätäksesi toimintoja pistelaskurisovellukseen JavaScriptin avulla.

toimintoLisää Laskuri() {
var laske = Määrä(ikkuna.localStorage.getItem("count"));
 count += 1;
 window.localStorage.setItem("Kreivi", Kreivi);
 document.getElementById("pisteet").innerHTML = määrä;
}

The nouseLaskuri() funktio hakee laskennan käyttämällä getItem()-metodia. Se muuntaa tuloksen Numeroksi, koska getItem() palauttaa merkkijonon ja tallentaa sen count-muuttujaan.

Kun napsautat ensimmäistä kertaa Lisää pisteitä -painike on ennen kutsua setItem(). Selaimesi ei löydä Kreivi avain localStoragessa, joten se palauttaa nolla-arvon. Koska Number()-funktio palauttaa 0:n nollasyötteelle, se ei vaadi erikoistapausten käsittelyä. Koodi voi turvallisesti lisätä laskenta-arvoa ennen sen tallentamista ja dokumentin päivittämistä uuden arvon näyttämiseksi.

toimintolaske Laskuri() {
var laske = Määrä(ikkuna.localStorage.getItem("count"));
 count -= 1;
 window.localStorage.setItem("Kreivi", Kreivi);
 document.getElementById("pisteet").innerHTML = määrä;
}

The vähennäLaskuri() toiminto hakee ja tarkistaa tiedot aivan kuten nouseLaskuri() tekee. Se vähentää Kreivi muuttuja 1:llä, jonka oletusarvo on 0.

toimintoclearCounter() {
ikkuna.paikallinen varasto.asia selvä();
 document.getElementById("pisteet").innerHTML = "";
}

Viimeinen, clearCounter() -toiminto poistaa kaikki tiedot localStoragesta käyttämällä asia selvä() menetelmä.

Tee enemmän paikallisen tallennustilan avulla

LocalStorage-objektilla on useita menetelmiä, kuten setItem(), getItem(), removeItem() ja clear(). Vaikka localStoragea on helppo käyttää, arkaluonteisten tietojen tallentaminen ei ole turvallista. Mutta se on hyvä valinta kehittää projekteja, jotka eivät vaadi paljon tallennustilaa eivätkä sisällä arkaluonteisia tietoja.

Haluatko rakentaa toisen localStorage-pohjaisen JavaScript-projektin? Tässä on perustehtäväluettelosovellus, jonka voit kehittää HTML: n, CSS: n ja JavaScriptin avulla.