Skriv og husk

contenteditable

Denne attributten skal gi oss mulighet for å editere tekst på en webside. F.eks. slik ( en p-tag med attributt:contenteditable="true")

Skriv her

Eller du kan fylle ut med flere punkter i lista over dine favorittlag (en ol-tag med attributt:contenteditable="true"):

1. FC Barcelona

Prøv copy and paste.

Dette gir oss altså 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. Det gir oss imidlertid ingen varig effekt på siden. reload vil bringe oss tilbake til originalen.

Fyll ut dine favorittlag i lista ovenfor og Send

Koden som kjører er slik:

function sendFavorites()
{
    // find teams
    var teams=document.getElementById('favorites').getElementsByTagName('li');
    var param='teams=';
    for(ix=0;ix<teams.length;ix++)
        param+=teams[ix].innerHTML+',';
    url='http://www.it.hiof.no/~borres/cgi-bin/forms/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="source" 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()
{
    document.getElementById('result').innerHTML=
    document.getElementById('source').value;
}

localStorage

HTML5 gir oss altså mulighet for å lagre data lokalt slik at vi kan plukke det opp i nettleseren.

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 ekspeimenterer litt med nettleserens historie ser vi at "clear cache" ikke ødelegger localStorage, men "clear cookies" gjør det. Det er derfor nærliggende at localStorage er et interface mot det vi kjenner fra tidligere som cookies.

localStorage har følgende egenskaper

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

Vi prøver å kombinere contenteditable med localStorage, og prøver oss med en ny favorittliste, denne gangen 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>

sessionStorage

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