Het localStorage-mechanisme biedt een type webopslagobject waarmee u gegevens in de browser kunt opslaan en ophalen. U kunt gegevens opslaan en openen zonder vervaldatum; de gegevens zijn beschikbaar, zelfs nadat een bezoeker uw site heeft gesloten.
Normaal gesproken krijg je toegang tot localStorage met JavaScript. Met een kleine hoeveelheid code kun je een voorbeeldproject bouwen, zoals een scoreteller. Dit laat zien hoe u permanente gegevens kunt opslaan en openen met alleen client-side code.
Wat is localStorage in JavaScript?
Het localStorage-object maakt deel uit van de webopslag-API die door de meeste webbrowsers wordt ondersteund. U kunt gegevens opslaan als sleutel/waarde-paren met localStorage. De unieke sleutels en waarden moeten de UTF-16 DOM String-indeling hebben.
Als u objecten of arrays wilt opslaan, moet u ze converteren naar strings met behulp van de JSON.stringify() methode. U kunt maximaal 5 MB aan gegevens opslaan in localStorage. Ook kunnen alle vensters met dezelfde oorsprong de localStorage-gegevens van die site delen.
Een browser verwijdert deze gegevens niet, zelfs niet wanneer een gebruiker deze sluit. Het zal tijdens een toekomstige sessie beschikbaar zijn voor de website die het heeft gemaakt. U moet localStorage echter niet gebruiken voor gevoelige gegevens, omdat andere scripts die op dezelfde pagina worden uitgevoerd er toegang toe hebben.
lokale opslag vs. sessieOpslag
De localStorage en sessionStorage objecten maken deel uit van de Web Storage API die sleutel-waardeparen lokaal opslaat. Alle moderne browsers ondersteunen ze allebei. Met localStorage verlopen de gegevens niet, zelfs niet nadat een gebruiker zijn browser sluit. Dit verschilt van sessionStorage die gegevens wist wanneer de paginasessie eindigt. Een paginasessie eindigt wanneer u een tabblad of venster sluit.
De code die in dit project wordt gebruikt, is beschikbaar in een GitHub-opslagplaats en is gratis voor u om te gebruiken onder de MIT-licentie. Als je een live versie van het scoretellerproject wilt zien, kun je de live demo.
Hoe werkt localStorage?
U hebt toegang tot de localStorage-functionaliteit via de Venster.lokaleOpslag eigendom. Deze eigenschap biedt verschillende methoden, zoals setItem(), getItem() en removeItem(). U kunt deze gebruiken om sleutel/waarde-paren op te slaan, te lezen en te verwijderen.
Gegevens opslaan in localStorage
U kunt gegevens opslaan in localStorage met behulp van de setItem() methode. Deze methode accepteert twee argumenten, de sleutel en de bijbehorende waarde.
window.localStorage.setItem('Python', 'Guido van Rossum');Hier, Python is de sleutel en Guido van Rossum is de waarde. Als u een array of een object wilt opslaan, moet u deze converteren naar een string. U kunt een array of een object converteren naar een string met behulp van de JSON.stringify() methode.
venster.localStorage.setItem('Python', 'Guido van Rossum');const leerling = {
naam: "Yuvraj",
merken: 85,
onderwerp: "Machineleren"
}
const scores = [76, 77, 34, 67, 88];
venster.localStorage.setItem('resultaat', JSON.stringify (student));
venster.localStorage.setItem('marks', JSON.stringify (scores));
Gegevens uit localStorage lezen
U kunt gegevens uit localStorage lezen met behulp van de getItem() methode. Deze methode accepteert de sleutel als een parameter en retourneert de waarde als een tekenreeks.
laten data1 = venster.localStorage.getItem('Python');
laten data2 = venster.localStorage.getItem('resultaat');
troosten.log (gegevens1);
troosten.log (gegevens2);
Dit levert de volgende uitvoer op:
Guido van Rossum
{"naam":"Yuvraj","merken":85,"onderwerp":"Machinaal leren"}Als u het resultaat van een string naar een object wilt converteren, moet u de gebruiken JSON.parse() methode.
laten data2 = JSON.ontleden(venster.localStorage.getItem('resultaat'));
troosten.log (gegevens2);LocalStorage-sessies verwijderen
U kunt localStorage-sessies verwijderen met de Verwijder voorwerp() methode. U moet de sleutel als parameter aan deze methode doorgeven om het sleutel-waardepaar te verwijderen. Als de sleutel bestaat, verwijdert de methode het sleutel-waardepaar en als de sleutel niet bestaat, doet de methode niets.
window.localStorage.removeItem('Python');
window.localStorage.removeItem('C++');Alle items in localStorage wissen
U kunt alle items in de lokale opslag wissen met de Doorzichtig() methode. U hoeft geen enkele parameter aan deze methode door te geven.
venster.lokale opslag.Doorzichtig();Hoe de lengte van localStorage te vinden
U kunt de lengte van localStorage vinden met behulp van de localOpslaglengte eigendom.
laten len = localStorage.length;
troosten.log (len);Hoe de sleutel op een bepaalde positie te krijgen?
U kunt de sleutel op een bepaalde positie krijgen met behulp van de sleutel() methode. Deze methode accepteert de index als parameter.
laten d = localStorage.key(1);
troosten.log (d);De methode key() wordt voornamelijk gebruikt om alle items in localStorage te doorlopen.
Hoe u door alle items in localStorage kunt bladeren
U kunt alle items in localStorage herhalen met behulp van een for-lus.
voor (laten ik = 0; i < localStorage.length; ik++){
laten sleutel = localStorage.key (i);
laten waarde = localStorage.getItem (sleutel);
troosten.log (sleutel, waarde);
}De methode key() accepteert de index als argument en retourneert de bijbehorende sleutel. De methode getItem() accepteert de sleutel als argument en retourneert de bijbehorende waarde. Als laatste, de console.log() methode drukt het sleutel-waardepaar af.
Eenvoudig JavaScript-project op basis van localStorage
Met een goed begrip van de basismethoden, kunt u zich ontwikkelen een eenvoudig JavaScript-project gebaseerd op localStorage. In dit project maak je een scoreteller-app die het aantal scores verhoogt en verlaagt met een klik op de knop. Je implementeert ook functionaliteit om alle items in localStorage te wissen.
Creëer een index.html en script.js bestand in een nieuwe map en open de bestanden in uw favoriete code-editor. Gebruik de volgende HTML-code om een interface voor de scoreteller-app te maken:
<!DOCTYPE html>
<html>
<lichaam>
<h1>localOpslag in JavaScript</h1>
<knop onclick="vermeerderTeller()" type="knop">Score verhogen</button>
<knop onclick="afnameCounter()" type="knop">Score verlagen</button>
<knop onclick="clearCounter()" type="knop">Lokale opslag wissen</button>
<p>Score:</p>
<p id="scoren"></p>
<p>Klik op de "Score verhogen" knop om de score te verhogen</p>
<p>Klik op de "Score verlagen" knop om de score te verlagen</p>
<p>Klik op de "Lokale opslag wissen" knop om de localStorage te wissen</p>
<p>
U kunt het browsertabblad sluiten (of venster), en proberen opnieuw.
Je zult zien dat de gegevens nog steeds bestaan enisniet verloren zelfs na sluiting
de browser.
</p>
<script src="script.js"></script>
</body>
</html>Deze pagina bevat drie knoppen: Score verhogen, Score verlagen, en Lokale opslag wissen. Deze knoppen noemen de vermeerderTeller(), afnameCounter(), en clearCounter() respectievelijk functies. Gebruik de volgende code om functionaliteit toe te voegen aan de scoreteller-app met JavaScript.
functievermeerderTeller() {
var tellen = Nummer(venster.localStorage.getItem("count"));
tel += 1;
window.localStorage.setItem("graaf", graaf);
document.getElementById("scoren").innerHTML = aantal;
}De vermeerderTeller() functie haalt de telling op met behulp van de methode getItem(). Het converteert het resultaat naar een Getal, aangezien getItem() een tekenreeks retourneert en deze opslaat in de variabele count.
De eerste keer dat u op de klikt Score verhogen knop zal zijn vóór elke aanroep naar setItem(). Uw browser vindt de graaf sleutel in localStorage, zodat het een null-waarde retourneert. Aangezien de functie Number() 0 retourneert voor een null-invoer, heeft deze geen speciale behandeling van hoofdletters nodig. De code kan de telwaarde veilig verhogen voordat deze wordt opgeslagen en het document wordt bijgewerkt om de nieuwe waarde weer te geven.
functieafnameCounter() {
var tellen = Nummer(venster.localStorage.getItem("count"));
aantal -= 1;
window.localStorage.setItem("graaf", graaf);
document.getElementById("scoren").innerHTML = aantal;
}De afnameCounter() functie haalt de gegevens op en controleert ze net als vermeerderTeller() doet. Het verlaagt de graaf variabele met 1, die standaard 0 is.
functieduidelijkteller() {
venster.lokale opslag.Doorzichtig();
document.getElementById("scoren").innerHTML = "";
}Als laatste, de clearCounter() functie verwijdert alle gegevens uit localStorage met behulp van de Doorzichtig() methode.
Doe meer met lokale opslag
Het localStorage-object heeft verschillende methoden, waaronder setItem(), getItem(), removeItem() en clear(). Hoewel localStorage gemakkelijk te gebruiken is, is het niet veilig om gevoelige informatie op te slaan. Maar het is een goede keuze om projecten te ontwikkelen die niet veel opslagruimte vereisen en geen gevoelige informatie bevatten.
Wilt u nog een op localStorage gebaseerd JavaScript-project bouwen? Hier is een eenvoudige takenlijst-app die u kunt ontwikkelen met HTML, CSS en JavaScript.
