html 5

Local storage

Vad är local storage?

Local storage, eller HTML storage som det också kallas, är en ny API som låter dig spara webbdata lokalt i datorn. Det innebär att du kan utveckla mindre applikationer utan databas, och uppgifterna kommer ändå att vara kvar nästa gång användaren öppnar upp webbläsaren.

Låt oss titta på ett enkelt exempel. Antag att du vill göra ett personligt hälsningsmeddelande till en webbsida. Börja med att klicka på knappen nedan:

Det här meddelandet är skapat på vanligt vis, utan local storage. Testa att ladda om sidan (refresha eller lämna sidan för att sedan återvända). Vad märker du? Jo, meddelandet är naturligtvis borta. Låt oss därför göra ett nytt försök, denna gång med local storage:

Om du nu laddar om sidan kommer meddelandet att vara kvar – idag, i morgon och för alltid. (Vill du radera? Klicka på knappen igen och strunta i att fylla i namn denna gång.)

Finns det en local storage-tagg?

Det finns ingen storage-tagg, lika lite som det finns en geolocation-tagg. Local storage styrs av javaScript men fungerar tillsammans med HTML5 i de webbläsare som stödjer detta. Det handlar dock om client-side-programmering så kunskaper i serverprogrammering och databaser behövs alltså inte. Låt mig guida dig igenom koden till exemplet ovan.

window.onload = function()
{ remember_name(); }

Den del av koden som tar fram sparade data behöver initieras redan när sidan laddas. Jag har kallat denna funktion för remember_name().

function withStorage()
{
var name2 = prompt("Fyll i namn:");
document.getElementById('withStorage').value = name2;
localStorage.setItem('visitorname', name2);
document.getElementById('greeting2').innerHTML = "Välkommen " + name2 + "!";
localStorage.setItem('visitorname', name2);
}

Den funktion jag kallat withStorage() hämtar inputdata från prompten (dialogrutan) och sätter sedan den inmatade texten i en div vid namn 'greeting2'. localStorage.setItem() lägger in data i minnet.

function remember_name()
{
registered_name = localStorage.getItem('visitorname');
if(registered_name)
{
document.getElementById('greeting2').innerHTML = ('Välkommen ' + registered_name);
}
}

Funktionen remember_name() hämtar sedan upp data ur minnet och placerar den i diven. Som du märker har jag här använt localStorage.getItem().

Kopiera gärna koden och se om du får den att funka.

Med local storage sparas information lokalt i datorn.

Är databasernas tid förbi? Om fördelar och nackdelar med local storage

Låt mig säga det direkt: local storage är praktiskt och ett välkommet tillskott, men ersätter inte databaserna. Snarare påminner det om cookies, men kan spara större mängder data och arbetar som sagt lokalt.

Local storage spar således data i användarens dator, men enbart i den webbläsare användaren för tillfället nyttjar. Det innebär att du exempelvis kan fortsätta att spela ett spel som fungerar med local storage, men endast om du öppnar upp spelet i samma browser.

Ett exempel på välkänd sajt som använder local storage är YouTube. Kanske har du lagt märke till att du kan titta på klipp, koppla ner internet och fortsätta att titta på klippet offline, om och om igen. Detta är så klart en klar fördel.

En nackdel är däremot att det inte går att spara annat än lokalt. Föreställ dig att Facebook skulle använda sig av local storage för statusuppdateringar. Du skulle förvisso kunna spara dina egna inlägg, men för att dela dem med andra behöver du fortfarande skicka iväg dem, via en databas, till själva sajten.

Databasernas tid är med andra ord absolut inte förbi.

Post it-lapp med local storage

Jag har konstruerat en post it-lapp som exempel på användning för local storage. För att låta användaren skriva i själva webbläsaren, utan formulär, har jag satt diven till contenteditable="true".

Testa genom att skriva anteckningar på lappen. För att radera slutgiltigt behöver du avsluta med att trycka på spara.