Spara och hämta data i lokal lagring med HTML5

June 27

Med HTML5, kan du skriva upp till 5 MB data till en särskild fil på klientdatorn. Alla sidor som kommer från din domän delar samma lagringsområde, så du kan använda denna mekanism för att hålla uppgifter ihållande mellan flera sidor. Data stannar också på klientdatorn (tills du tar bort den), så det kan användas för att hålla reda på information över tiden.

Först skriver lite kod för att lagra och hämta information. Till exempel, en kodsträng som lagrar och hämtar användarens namn ser ut så här:

Funktionen hälsar () {
name = localStorage.getItem ("namn");
if (namn == null || namn == "null") {
alert ("Hej, Stranger!");
name = prompt ("Vad heter du?");
localStorage.setItem ("namn", namn);
} Else {
alert ("Hej," + namn + "!");
} // End greet
} // End funktion

Den hämtningsprocessen är ganska enkel:

  1. Hämta värdet.

    Generellt kommer du skapa en variabel med samma namn som nyckeln. Försök att extrahera värdet från local objektet med getItem () metoden. Använt uppgifter är som att kolla in en bok från biblioteket.
  2. Bestäm om värdet finns.

    Om det inte finns nyckeln, blir värdet noll. Om så är fallet, göra något för att lägga till ett värde. Observera att vissa webbläsare ser för värdet "null" (ett strängvärde) och en del faktiskt använda nyckelordet null (inga citationstecken, eftersom det är ett nyckelord). Använd special operatören || (eller) för att leta efter någon möjlighet.
  3. Ändra variabeln.

    Din kod sannolikt kommer att ändra variabeln.
  4. Lagra värdet tillbaka i databasen.

    Den local Databasen är separerad från dina variabler. Det är upp till dig att uppdatera alla data du vill behålla. Använd setItem () för att spara data. Detta är som återvänder en bok till biblioteket.