Web Storage
Ett alternativ till cookies är att använda sig av Web Storage. Detta är ett API som möjliggör att man kan spara undan större mängder data på klientsidan. Till skillnad mot cookies, så är inte servern involverad på något vis och det är på klientsidan som all hantering sker. Vill man använda sig Web Storage för att kommunicera med servern, måste man ha kod som läser upp data ur Web Storage och som sedan på något vis skickar denna till servern.
Skillnader mot cookies
Det finns ett antal skillnader mellan Web Storage och cookies.
- Det är en helt klientbaserad lösning och servern är inte involverad på något vis.
- Vi kan inte ange en livstid för datan, vill vi ha något dylikt får vi sköta det själva.
- Man har mindre kontroll över vilka sidor som kan komma åt datan. Alla sidor inom samma domän kan komma åt all data som skapats inom domänen.
Oavsett skillnaderna så är Web Storage att föredra i de flesta situationer. Den anledning man kan ha för att vilja använda cookies, är möjligheten att man kan ange en livstid för dem.
Modernt och vanligt
Web Storage är en mycket nyare och färskare teknik än cookies. Dock så har tekniken mycket bra stöd i de flesta webbläsare. Så man behöver inte vara orolig för att den inte ska finnas att tillgå. Man bör dock göra en kontroll som kollar att Web Storage verkligen finns. Det kan man göra i början av koden. Skulle inte tekniken finnas på användarens webbläsare, bör man se till att ens kod gör något vettigt som talar om för användaren varför inte applikationen fungerar så som det var tänkt.
Använd inte globalStorage! Det var en speciallösning som fanns i ett fåtal webbläsare innan HTML5 standardiserade Web Storage-API:et.
localStorage och sessionStorage
När man jobbar med Storage-API:et kan man jobba mot två olika lagringsutrymmen, dels localStorage och dels sessionStorage. Skillnaden mellan dessa är att data som lagras i localStorage kommer att ligga kvar mellan sessioner, medan data i sessionStorage kommer att tas bort. I det senare fallet så tas datan bort när användaren stänger sin webbläsare eller när sista fliken som använder sessionStorage stängs.
Nyckel/värde
All data i Web Storage består av en nyckel och ett värde. Nyckeln är vad vi använder för att leta på den data vi vill komma åt. Detta går att jämföra med ett variabelnamn. Till varje nyckel hör ett värde, precis så som variabler har värden. Så vi kan alltså tänka på Web Storage som "vanliga" variabler, bara det att vi måste jobba lite extra för att komma åt dem.
Att jobba med Web Storage
API:et för localStorage och sessionStorage är helt likformigt och alla metoder som finns för den ena, finns även för den andra. Så i exemplen nedan skulle man lika gärna kunna använda sessionStorage istället för localStorage. Det enda som skiljer sig är att man inleder med namnet på det storage man vill komma åt.
Följande metoder ingår i Web Storage API:et.
.setItem()
För att sätta ett värde i localStorage använder vi oss av; localStorage.setItem(). Denna metod tar två inparametrar.
Nyckel
Den först inparametern till localStorage.setItem() anger vilken nyckel man vill sätta. Skulle nyckeln redan existera, kommer denna att skrivas över med ny data.
Värde
Den andra inparametern som man skickar till localStorage.setItem() är till för att ange vilket värde man vill att nyckeln ska associeras med. Värdet lagras alltid som en sträng!
Vid fel
Om något skulle gå fel, t.ex. för att localStorage är fullt, så genereras ett undantag. Så man bör alltid ha en try/catch runt om sina setItem-anrop.
.getItem()
För att läsa ut värden ifrån localStorage använder man sig av; localStorage.getItem(). Denna metod tar en inparameter, vilket är den nyckel vars värde man vill komma åt. Metoden returnerar det värde som motsvarar det strängvärde som matchar den angivna nyckeln. Om inte nyckeln existerar returnerar den null.
.length()
Om man vill veta hur många nycklar som finns tillgängliga använder man sig av length(). Denna metod returnerar antalet nyckel/värde-par i valt storage.
.key()
Som inparameter tar .key() ett numeriskt index som indikerar vilket nyckel/värde par man vill läsa ut. I kombination med .length(), skulle man kunna använda denna metod för att skapa en loop som läser ut alla nyckel/värde-par i ett storage.
.removeItem()
För att ta bort nyckel/värde-par ur storage använder man sig av removeItem(). Denna tar som inparameter nyckeln som motsvarar det par man vill ta bort.
.clear()
Om man vill rensa sin storage helt och hållet, kan man använda sig av metoden .clear().