Hur man lagrar webbplatsdata med HTML5

Under hela din webbläsarkarriär är jag säker på att du har stött på begreppet cookies, textbitar som lagras av webbläsaren för att hämtas och användas vid ett senare tillfälle. Dessa varierar från att bara komma ihåg ditt namn för att välkomna dig personligen nästa gång du besöker, till mer komplicerad lagring av autentisering och innehåll i kundvagnen.

Cookies fungerar i allmänhet bra men kan vara krångliga att implementera, eftersom de är inställda på att raderas som standard när webbläsaren stängs. Om en webbplatsägare behöver att uppgifterna lagras under en längre period kan en cookie ges ett utgångsdatum. Återigen är det här inte så rent som det skulle kunna vara: hur långt in i framtiden ställer du till exempel datumet? Och vad händer när en användare spolar bort sina cookies?

HTML5 försöker rensa upp detta med introduktionen av webblagring.

Webblager

Webblagring finns i två olika typer, sessionStorage och localStorage. Som man kan utläsa av namnen, sessionStorage är för att lagra data som endast krävs för en viss session, och localStorage är för data som ska finnas kvar på obestämd tid.

Webblagring separerar sessionsdata korrekt från långtidsdata

Detta eliminerar behovet av utgångsdatum och gör det omedelbart tydligare vilken data som gäller när och hur länge. Det gör det också otroligt enkelt att implementera.

API:t

Eftersom båda typerna är så lika delar de samma API, som innehåller följande objekt och funktioner:

// The number of items being stored
long length;

// To retrieve the item 'key' from storage
getItem(key);

// To set the item 'key' in storage with 'value'
setItem(key, value);

// To remove the item from storage
removeItem(key);

// To clear the entire storage
clear();

Det hela är ganska enkelt och okomplicerat att använda.

Säger hej

Låt oss säga att du ville lagra en användares namn för att välkomna dem tillbaka senare. Förutsatt att det finns en enkel HTML5-sida som består av ett anropat inmatningsfält name och en länk som anropar funktionen saveName() det skulle definieras enligt följande:

function saveName() {
   var name = document.getElementById('name').value;
   localStorage.setItem('username', name);
}

Varje gång den här sidan laddas, anropa en ny funktion sayHello() som definieras som:

function sayHello() {
   var userName = localStorage.getItem('username');
   if (userName != null) alert("Hello " + userName + " and welcome back!");
}

Detta kommer att kontrollera om det finns ett användarnamn i localStorage, och om det finns där, välkomnar användaren.

Anteckna det localStorage används här snarare än sessionStorage eftersom vi vill att namnet ska visas nästa gång användaren besöker sidan igen, under vilken tid de kan ha stängt webbläsaren, vilket skulle rensa allt i sessionStorage.

Du kan se detta fungera för dig själv i detta mycket enkla ”säg hej”-exempel. Ange ett namn, klicka på ”spara” och ladda om sidan.

Om du anger ett annat namn i inmatningsfältet och klickar på ’spara’ kommer det befintliga värdet att skrivas över. Vi kan också ta bort objektet genom att ringa localStorage.removeItem('name'); som endast skulle ta bort det objektet. Hela localStorage kunde rensas genom att ringa localStorage.clear();

Sessionslagring

sessionStorage fungerar på exakt samma sätt, förutom att data rensas automatiskt när webbläsaren stängs.

Du kan också lagra flera dataobjekt i webblagring kopplad till den ena nyckeln, men du kommer att behöva använda ett JavaScript-objekt och något som JSON som hjälper till att ”strängifiera” lagrad data och på så sätt underlätta lagringen.

Webbläsarstöd

Om du är van vid att läsa om Internet Explorers nuvarande oförmåga att stödja någon HTML5-funktion, får du en överraskning här. Webblagring stöds faktiskt av IE8 såväl som alla större webbläsare:

• Firefox 3.5+
• Safari 4.0+
• Chrome 4.0+
• Opera 10.5+
• Internet Explorer 8.0+
• iPhone 2.0+
• Android 2.0+

Så i princip kan du börja använda det nu!