localStorage, sessionStorage og contenteditable

localStorage

localStorage har følgende egenskaper/metoder:

• length
• key(int)
• getItem(key)
• setItem(key, value)
• removeItem(key)
• clear()

Prøv å reloade denne siden, med reload-knappen eller ctrl-r

Du har lastet denne siden ganger

Den involverte koden er slik:

<p>Du har lastet denne siden <span style="font-size:18px;color:red">
<script>
    if (!localStorage.pageCounter)
        localStorage.setItem('pageCounter',0);
    localStorage.setItem('pageCounter',parseInt(localStorage.pageCounter)+1);
    document.write(localStorage.pageCounter);
</script>
</span>ganger</p>

Hvis vi eksperimenterer litt med nettleserens historie ser vi at "clear cache" ikke ødelegger localStorage, men "clear cookies" gjør det.

contenteditable

Vi prøver å kombinere contenteditable med localStorage, og prøver oss med en favorittliste med artister. Forsøk å editere denne lista og reload siden eller lukk den og åpne på nytt.

1. Bruce Springsteen

Sekvensen som drar dette ser slik ut:

<script>
function remember(eltId)
{
    localStorage.setItem(eltId,document.getElementById(eltId).innerHTML);
}
function recall(eltId)
{
    if(localStorage.getItem(eltId))
    document.getElementById(eltId).innerHTML=
        localStorage.getItem(eltId);
}
</script>
<ol id="favorites2" contenteditable="true" onkeyup="remember('favorites2')">
<li>Bruce Springsteen</li>
</ol>
<script>recall('favorites2');</script>

Hva hvis vi ønsker å lage en tidsbegrenset lagring, slik som vi kan gjøre i cookies ? Det er ingen enkel måte å fikse dette på. Den muligheten vi har er å lagre tidsbegrensningen som et eget item og kontrollere det når siden lastes. Eller vi kan bruke sessionStorage som bare lagrer mens siden er oppe i nettleseren.

Vi kan sjekke om vi kan får tak i localStorage på en annen webside. Forutsetter at du har lagt til og lagret noen flere artister i lista over.

Som du ser av denne demoen går dette greitt. Vi kan altså bruke localStorage som et "felles lager" i en site med flere websider.

Dette gir oss også mulighet for å editere tekst før vi printer og det gir oss mulighet for å editere tekst som kan plukkes opp og sendes f.eks som parameter i en AJAX-request eller som parameter i en GET.

Fyll ut dine favorittartistene dine i lista ovenfor og Send

Koden som kjører er slik:

function sendFavorites()
{
    // find teams
    var teams=document.getElementById('favorites2').getElementsByTagName('li');
    var param='teams=';
    for(ix=0;ix<teams.length;ix++)
        param+=teams[ix].innerHTML+',';
    url='https://borres.hiof.no/wep/commons/py/std.py?'+
         param.substring(0,param.length-1);
    self.location=url;
}

textarea

Editer, gjerne HTML-kode (kanskje et element med med contenteditable !), og Oppdater

HTML-fragmentet:

<textarea rows="10" cols="40" id="txtsource" contenteditable="true">
<ol>
<li>Ole</li>
<li>Jens</li>
</ol>
</textarea>
<div><button onclick="Update()">Oppdater</button></div>
<div id="result">her havner det</div>

Scriptet:

function Update()
{
    var V=document.getElementById('txtsource').value;
    document.getElementById('result').innerHTML=V;
    localStorage.setItem('txtsource',V);
}

Hvis du ha gjort noen endringer kan du jo sjekke her:

remove

Hvis du vil fjerne alt som er satt i localStorage på denne siden:Fjern

function removeAll(){
    localStorage.removeItem('favorites2');
    localStorage.removeItem('pageCounter');
    localStorage.removeItem('txtsource');
}

sessionStorage

sessionStorage fungerer som localStorage, men har kun varighet så lenge vevsiden er åpen i nettleseren.