LocalStorage-mekanismen tillhandahåller en typ av webblagringsobjekt som låter dig lagra och hämta data i webbläsaren. Du kan lagra och komma åt data utan utgångsdatum; uppgifterna kommer att vara tillgängliga även efter att en besökare stänger din webbplats.
Du kommer normalt åt localStorage med JavaScript. Med en liten mängd kod kan du bygga ett exempelprojekt, som en poängräknare. Detta kommer att visa hur du kan lagra och komma åt beständiga data med endast klientkod.
Vad är localStorage i JavaScript?
LocalStorage-objektet är en del av webblagrings-API: et som de flesta webbläsare stöder. Du kan lagra data som nyckel-värdepar med localStorage. De unika nycklarna och värdena ska vara i formatet UTF-16 DOM String.
Om du vill lagra objekt eller arrayer måste du konvertera dem till strängar med hjälp av JSON.stringify() metod. Du kan lagra upp till 5 MB data i localStorage. Alla fönster med samma ursprung kan också dela webbplatsens lokala lagringsdata.
En webbläsare kommer inte att radera denna data även när en användare stänger den. Den kommer att vara tillgänglig för webbplatsen som skapade den under alla framtida sessioner. Du bör dock inte använda localStorage för känslig data eftersom andra skript som körs på samma sida kan komma åt det.
localStorage vs. sessionStorage
De localStorage och sessionStorage objekt är en del av Web Storage API som lagrar nyckel-värdepar lokalt. Alla moderna webbläsare stöder dem båda. Med localStorage förfaller inte data även efter att en användare stänger sin webbläsare. Detta skiljer sig från sessionStorage som rensar data när sidsessionen slutar. En sidsession avslutas när du stänger en flik eller ett fönster.
Koden som används i detta projekt är tillgänglig i en GitHub-förråd och är gratis för dig att använda under MIT-licensen. Om du vill ta en titt på en liveversion av poängräknarprojektet kan du kolla in live demo.
Hur fungerar localStorage?
Du kan få åtkomst till localStorage-funktionen via Window.localStorage fast egendom. Den här egenskapen tillhandahåller flera metoder som setItem(), getItem() och removeItem(). Du kan använda dessa för att lagra, läsa och ta bort nyckel/värdepar.
Hur man lagrar data i localStorage
Du kan lagra data i localStorage med hjälp av setItem() metod. Denna metod accepterar två argument, nyckeln och motsvarande värde.
window.localStorage.setItem('Pytonorm', 'Guido van Rossum');Här, Pytonorm är nyckeln och Guido van Rossum är värdet. Om du vill lagra en array eller ett objekt måste du konvertera det till en sträng. Du kan konvertera en array eller ett objekt till en sträng med hjälp av JSON.stringify() metod.
fönster.localStorage.setItem('Python', 'Guido van Rossum');konst student = {
namn: "Yuvraj",
märken: 85,
ämne: "Machine Learning"
}
konst poäng = [76, 77, 34, 67, 88];
fönster.localStorage.setItem('result', JSON.stringify (student));
fönster.localStorage.setItem('marks', JSON.stringify (poäng));
Hur man läser data från localStorage
Du kan läsa data från localStorage med hjälp av getItem() metod. Denna metod accepterar nyckeln som en parameter och returnerar värdet som en sträng.
låta data1 = fönster.localStorage.getItem('Python');
låta data2 = fönster.localStorage.getItem('result');
trösta.log (data1);
trösta.log (data2);
Detta ger följande utdata:
Guido van Rossum
{"namn":"Yuvraj","märken":85,"ämne":"Maskininlärning"}Om du vill konvertera resultatet från en sträng till ett objekt bör du använda JSON.parse() metod.
låta data2 = JSON.parse(fönster.localStorage.getItem('result'));
trösta.log (data2);Hur man tar bort localStorage-sessioner
Du kan ta bort localStorage-sessioner med hjälp av ta bort sak() metod. Du måste skicka nyckeln som en parameter till den här metoden för att radera nyckel-värdeparet. Om nyckeln finns kommer metoden att ta bort nyckel-värdeparet och om nyckeln inte finns kommer metoden att göra ingenting.
window.localStorage.removeItem('Pytonorm');
window.localStorage.removeItem('C++');Hur man rensar alla objekt i localStorage
Du kan rensa alla objekt i lokal lagring med hjälp av klar() metod. Du behöver inte skicka någon parameter till denna metod.
fönster.lokalt utrymme.klar();Hur man hittar längden på localStorage
Du kan hitta längden på localStorage med hjälp av localStorage.length fast egendom.
låta len = localStorage.length;
trösta.log (len);Hur man får nyckeln på en given position
Du kan få nyckeln på en given position med hjälp av nyckel() metod. Denna metod accepterar indexet som en parameter.
låta d = localStorage.key(1);
trösta.log (d);Metoden key() används främst för att loopa igenom alla objekt i localStorage.
Hur man går igenom alla föremål i localStorage
Du kan iterera över alla objekt i localStorage med en for-loop.
för (låta jag = 0; i < localStorage.length; i++){
låta nyckel = localStorage.key (i);
låta värde = localStorage.getItem (nyckel);
trösta.log (nyckel, värde);
}Metoden key() accepterar indexet som ett argument och returnerar motsvarande nyckel. Metoden getItem() accepterar nyckeln som ett argument och returnerar motsvarande värde. Slutligen console.log() metoden skriver ut nyckel-värdeparet.
Enkelt JavaScript-projekt baserat på localStorage
Med förståelse för dess grundläggande metoder kan du utvecklas ett enkelt JavaScript-projekt baserat på localStorage. I det här projektet kommer du att skapa en poängräknare-app som kommer att öka och minska poängantalet enligt ett knappklick. Du kommer också att implementera funktionalitet för att rensa alla objekt i localStorage.
Skapa en index.html och script.js fil i en ny mapp och öppna filerna i din favoritkodredigerare. Använd följande HTML-kod för att skapa ett gränssnitt för poängräknare-appen:
<!DOCTYPE html>
<html>
<kropp>
<h1>localStorage i JavaScript</h1>
<knappen onclick="öka Counter()" typ="knapp">Öka poängen</button>
<knappen onclick="minskaCounter()" typ="knapp">Minska poäng</button>
<knappen onclick="clearCounter()" typ="knapp">Rensa localStorage</button>
<sid>Göra:</s>
<p id="Göra"></s>
<sid>Klicka på "Öka poängen" knappen för att öka antalet poäng</s>
<sid>Klicka på "Minska poäng" knappen för att minska antalet poäng</s>
<sid>Klicka på "Rensa localStorage" knappen för att rensa den lokala lagringen</s>
<sid>
Du kan stänga webbläsarfliken (eller fönster), och Prova om igen.
Du kommer att se att uppgifterna fortfarande finns kvar ochärinte förlorade även efter stängning
webbläsaren.
</s>
<script src="script.js"></script>
</body>
</html>Den här sidan innehåller tre knappar: Öka poängen, Minska poäng, och Rensa localStorage. Dessa knappar kallar öka Counter(), minskaCounter(), och clearCounter() funktioner respektive. Använd följande kod för att lägga till funktionalitet till poängräknarens app med JavaScript.
fungeraöka Räknaren() {
var räkna = siffra(fönster.localStorage.getItem("count"));
räkna += 1;
window.localStorage.setItem("räkna", räkna);
document.getElementById("Göra").innerHTML = räkna;
}De öka Counter() funktionen hämtar antalet med metoden getItem(). Den konverterar resultatet till ett Number, eftersom getItem() returnerar en sträng och lagrar den i count-variabeln.
Första gången du klickar på Öka poängen knappen kommer att vara före alla anrop till setItem(). Din webbläsare hittar inte räkna nyckel i localStorage, så att det returnerar ett nollvärde. Eftersom Number()-funktionen returnerar 0 för en noll-ingång, behöver den ingen speciell ärendehantering. Koden kan säkert öka räknevärdet innan den lagras och dokumentet uppdateras för att visa det nya värdet.
fungeraminskaRäknare() {
var räkna = siffra(fönster.localStorage.getItem("count"));
räkna -= 1;
window.localStorage.setItem("räkna", räkna);
document.getElementById("Göra").innerHTML = räkna;
}De minskaCounter() funktion hämtar och kontrollerar data precis som öka Counter() gör. Det minskar räkna variabel med 1, som är standard till 0.
fungeraclearCounter() {
fönster.lokalt utrymme.klar();
document.getElementById("Göra").innerHTML = "";
}Sist, den clearCounter() funktionen raderar all data från localStorage med hjälp av klar() metod.
Gör mer med localStorage
LocalStorage-objektet har flera metoder inklusive setItem(), getItem(), removeItem() och clear(). Även om localStorage är lätt att använda, är det inte säkert att lagra känslig information. Men det är ett bra val att utveckla projekt som inte kräver mycket lagring och inte involverar någon känslig information.
Vill du bygga ett annat localStorage-baserat JavaScript-projekt? Här är en grundläggande att-göra-lista-app som du kan utveckla med HTML, CSS och JavaScript.
