Web Storage
Bakgrund
Vi kan se till att data sparas lokalt på webklientens dator. Data som kan utnyttjas under en webbsidas visningstid och som kan utnyttjas nästa gång samma sida visas. Vi känner igen ordet "cookies", en liten fil på 4kB som kunde sparas lokalt.
I HTML5 så introducerades två nya element som kompletterar den, vi fick något som kallas localStorage och sessionStorage.
De nya "Web Storage" möjligheterna skiljer sig från "cookies" på fler sätt, det är snabbare och säkrare. De kan lagra upp till 5MB. Informationen i localStorage och sessionStorage skickas endast till webbservern om den ber om det (normalt så skickas den inte till servern, medan cookies alltid skickas i HTTP-headern). Den enda som kan komma åt datat i dessa localStorage och sessionStorage är en webbsida från samma domän själv. De(Web Storage) är kopplade till domänen varifrån webbsidan skickas från. Cookie har en giltighetstid.
De två nya objekten localStorage och sessionStorage är identiska förutom på en punkt, localStorage lagrar data som inte har något slut på giltighetstiden och sessionStorage kan enbart spara data i den aktuella sessionen. Det vill säga för localStorage kan data ligga på datorn så länge den fungerar medan data i en sessionStorage försvinner så fort fönstret(fliken) stängs ner. Startar vi upp flera webbläsarfönster med webbsidor från samma domän som utnyttjar localStorage/sessionStorage så når alla samma localStorage men får olika sessionStorage.
All data i de nya objekten localStorage och sessionStorage lagras som strängar(strings). Så när vi lagrat tal så behöver vi konvertera innehållet.
localStorage
Lagra information lokalt på klientdatorn, som kan utnyttjas av javascript på en webbsida från en viss domän, vid olika besök på webbsidor från just den domänen.
Vi utnyttjar den inbyggda funktionen Number() som omvandlar ett objekt till ett tal om det är möjligt, annars blir svaret NaN. (exempel, w3schools)
if(localStorage.getItem('visited')) {
// Om det finns data, plockar den ut datan och sparar i variabeln myData
var myData = Number(localStorage.getItem('visited'));
myData++;
localStorage.setItem('visited',myData);
document.getElementById('myfirstlocalstorage').innerHTML = 'Ditt '+myData+' besök!';
}
else {
localStorage.setItem('visited','1');
document.getElementById('myfirstlocalstorage').innerHTML = "Ditt första besök! Välkommen!";
}
Den här räknaren kommer aldrig nollställas igen när du tittar på den här sidan från denna dator :-)
sessionStorage
Är som localStorage men datan ligger bara kvar hos klienten under en session.
if(sessionStorage.getItem('loadings')) {
// Om det finns data, plockar den ut datan och sparar i variabeln myLoadings
var myLoadings = Number(sessionStorage.getItem('loadings'));
myLoadings++;
sessionStorage.setItem('loadings',myLoadings);
document.getElementById('myfirstsessionstorage').innerHTML = 'Din '+myLoadings+' uppdatering av sidan!';
}
else {
sessionStorage.setItem('loadings','1');
document.getElementById('myfirstsessionstorage').innerHTML = "Ditt första visning denna gång! Välkommen!";
}
Räknaren för uppdatering av sidan kommer nollställas när du öppnar sidan i nytt fönster (du får en ny räknare till den nya sessionen).
Ett större exempel
Utvecklat på en grundidé och basprogram av David Thinsz 12TE
<input id="something" type="text" placeholder="Skriv in något" /><button id="add">Lägg till i listan</button>
<br><br>
<button id="clear">Rensa listan</button>
<div>
<h3>Din "localStorage" lista</h3>
<ul id="myList"></ul>
</div>
<div>
<h3>Din "sessionStorage" info</h3>
<div id="sessionInfo"></div>
</div>
<script>
var txt = document.getElementById("something");
var add = document.getElementById("add");
var list = document.getElementById("myList");
var info = document.getElementById("sessionInfo");
var clear = document.getElementById("clear");
add.addEventListener('click',createList);
clear.addEventListener('click',rensaListan);
// "När fönstret laddas"
window.addEventListener('load', startList);
function startList() {
// Kollar om det finns något i en localStorage med namnet "list"
if(localStorage.getItem('list')) {
// Om det finns data i list, plockar den ut datan och sparar i variabeln data
var data = localStorage.getItem('list');
// Skriver ut i listan
list.innerHTML = data;
}
else {
// Annars skriver ut "Listan är tom"
list.innerHTML = "<li>Listan är tom</li>";
}
sessionStorage.setItem('info', '0');
info.innerHTML = '0 poster inskrivna denna session<br>';
}
function createList(){
if(localStorage.getItem('list')) {
var data = localStorage.getItem('list');
// Skapar ett localStorage med namnet "list" och stoppar in datan i den.
localStorage.setItem('list', data + '<li>' + txt.value + '</li>');
data = localStorage.getItem('list');
list.innerHTML = data;
txt.value = "";
}
else {
localStorage.setItem('list', '<li>' + txt.value + '</li>');
var data2 = localStorage.getItem('list');
list.innerHTML = data2;
txt.value = "";
}
if(sessionStorage.getItem('info')) {
//Number() plockar ut ett tal ur ett objekt, parseInt() hade också fungerat här
var antal = Number(sessionStorage.getItem('info'));
antal++;
sessionStorage.setItem('info', antal);
info.innerHTML = antal + ' poster inskrivna denna session<br>';
}
else {
sessionStorage.setItem('info','1');
info.innerHTML = '1 post inskriven denna session<br>';
}
}
function rensaListan(){
localStorage.setItem('list', '');
list.innerHTML = "";
sessionStorage.setItem('info', '0');
info.innerHTML = '0 poster inskrivna denna session<br>';
}
</script>
Din "localStorage" lista
Din "sessionStorage" info
Källor
w3schools
wikipedia(engelska)
blog.andyhume.net
http://blog.andyhume.net/localstorage-is-not-cookies/