Nyheter i IE 8: DOM Storage

När man lagrar information för en viss användare så brukar man använda antingen cookies för långvarig lagring, eller sessionsvariabler för kortvarig. I HTML 5 så finns en funktion som heter DOM Storage och gör det möjligt att lagra informationen på ett annorlunda sätt. Cookies kan t.ex. ha 4 kb eller max 20 värden, men med DOM Storage så kan man lagra upp till 10 MB på klienten, vilket gör det möjligt att spara annan information än man tidigare har kunnat göra.

Det går precis som tidigare att spara i sessionen eller permanent. För sessionen så används sessionStorage och mer permanent localStorage. De har samma metoder, men lagrar bara informationen på olika sätt. All informationen sparas som strängar, så vill vi använda t.ex. datum eller olika typer av tal så måste vi typa om variablerna innan de används.

Storage-objektet innehåller dessa metoder:

• clear
• Tar bort alla värden ur storage-objektet.
• getItem
• Hämtar värdet för den aktuella nyckeln.
• setItem
• Sätter ett värde för den aktuella nyckeln.
• removeItem
• Tar bort värdet med den aktuella nyckeln.
• key
• Returnerar nyckeln för att visst index.
• length
• Hämtar antalet värden som finns sparade.
• remainingSpace
• Returnerar hur många bytes som finns kvar för lagring.

Både localStorage och sessionStorage kan använda dessa metoder.

För att använda dessa så kan vi sätta värdet direkt på objektet:

localStorage.firstname = ‘Mikael’;

alert(localStorage.firstName);

Detta visar en alert-ruta med “Mikael”.

Vill vi ta bort just det här värdet så kan vi sedan använda removeItem:

localStorage.removeItem('firstname');

Vi kan alltså på ett mycket enkelt sätt lagra stora mängder data, på ett sätt som påminner om cookies och sessionsvariabler.