Lo script che presentiamo offre un' ottima dimostrazione di come si possano utilizzare i cookie per memorizzare diversi dati. Di base si tratta di un codice che permette all'utente di creare una lista contenente qualsiasi tipo di record ma può essere modificato anche per diventare, ad esempio, una raccolta di bookmark on line.
Il javascript è compatibile con Explorer 5.x e Netscape 6.x. Qualche problema potrebbe essere invece dato da Navigator 4.x per cui non se ne assicura il perfetto funzionamento.
- esempio.htm
Per una più semplice comprensione del presente script fai continuamente riferimento ai file sopracitati, verificando le procedure e i dati espressi. Solo in questo modo, con un continuo confronto, comprenderai le peculiarità di questo Javascript.
Inseriamo questo codice tra i tag <head> della pagina:
<script type="text/javascript" language="javascript">
<!--
var expDays = 30;
var colore1 = "#f0f0f0";
var colore2 = "#c6c6c6";
var font = "verdana";
var grandezza = 2;
var exp = new Date();
exp.setTime(exp.getTime() + (expDays*24*60*60*1000));
var ShowCount = 0;
var SwapColour;
function ListToDoItems()
{
var NumToDoItems = GetCookie('PT_NumToDoList');
var i;
var ToDoItem;
if (NumToDoItems == null)
{
NumToDoItems = 0;
}
ShowCount = 0; SwapColour = 0;
for (i=1; i <= NumToDoItems; i++)
{
ToDoItem = GetCookie('PT_ToDoItem'+i);
if (ToDoItem != null)
{
PrintItem(ToDoItem, i);
}
}
}
function DeleteItem(Count)
{
DeleteCookie('PT_ToDoItem'+Count);
setTimeout('window.location.reload()',1000);
}
function PrintItem (ToDoItem, Count)
{
var color = "";
SwapColour = 1 - SwapColour;
if (SwapColour==1) {color = "bgcolor='" + colore1 + "'"} else { color =
"bgcolor='" + colore2 + "'"};
ShowCount++;
document.write("<tr " + color + ">");
document.write("<td width=10% align="center" valign=top><font
face='"+font+"' size='"+grandezza+"'>"+ShowCount+"</font></td>");
document.write("<td width=60% align=left ><font face='"+font+"'
size='"+grandezza+"'>"+ToDoItem+"</font></td>");
document.write("<td width=15% align="center"><font face='"+font+"'
size='"+grandezza+"'>"+"<a href='javascript:EditItem(" + ShowCount + "," + Count + ")'>Modifica</a></font></td>");
document.write("<td width=15% align="center"><font face='"+font+"'
size='"+grandezza+"'>"+"<a href='javascript:DeleteItem(" + Count + ");'>Cancella</a></font></td>");
}
function AddItem()
{
var NumToDoItems = GetCookie('PT_NumToDoList');
var i;
var ToDoItem;
if (NumToDoItems == null)
{
NumToDoItems = 0;
}
ToDoItem = prompt("Inserisci nuovo record");
if ((ToDoItem != null) && (ToDoItem != "undefined" ))
{
NumToDoItems++;
SetCookie('PT_ToDoItem'+NumToDoItems, ToDoItem, exp);
SetCookie('PT_NumToDoList',NumToDoItems, exp);
window.location = window.location;
}
}
function EditItem(Display,Count)
{
var i;
var ToDoItem = GetCookie('PT_ToDoItem'+Count);
var ToDoItem2;
ToDoItem2 = prompt("Modifica record #"+Display, ToDoItem);
if ((ToDoItem2 != null) && (ToDoItem2 != "undefined" ))
{
SetCookie('PT_ToDoItem'+Count, ToDoItem2, exp);
window.location = window.location;
}
}
function getCookieVal (offset) {
var endstr = document.cookie.indexOf (";", offset);
if (endstr == -1)
endstr = document.cookie.length;
return unescape(document.cookie.substring(offset, endstr));
}
function GetCookie (name) {
var arg = name + "=";
var alen = arg.length;
var clen = document.cookie.length;
var i = 0;
while (i < clen) {
var j = i + alen;
if (document.cookie.substring(i, j) == arg)
return getCookieVal (j);
i = document.cookie.indexOf(" ", i) + 1;
if (i == 0) break;
}
return null;
}
function SetCookie (name, value) {
var argv = SetCookie.arguments;
var argc = SetCookie.arguments.length;
var expires = (argc> 2) ? argv[2] : null;
var path = (argc> 3) ? argv[3] : null;
var domain = (argc> 4) ? argv[4] : null;
var secure = (argc> 5) ? argv[5] : false;
document.cookie = name + "=" + escape (value) +
((expires == null) ? "" : ("; expires=" + expires.toGMTString())) +
((path == null) ? "" : ("; path=" + path)) +
((domain == null) ? "" : ("; domain=" + domain)) +
((secure == true) ? "; secure" : "");
}
function DeleteCookie (name) {
var exp = new Date();
exp.setTime (exp.getTime() - 1);
var cval = GetCookie (name);
document.cookie = name + "=" + cval + "; expires=" + exp;
setTimeout('window.location.reload()',1000);
}
// -->
</script>
Vediamo le poche variabili da personalizzare:
var expDays = 30;
i giorni di durata del cookie
var colore1 = "#f0f0f0";
il colore alternato della prima cella della tabella
var colore2 = "#c6c6c6";
il colore alternato della seconda cella della tabella
var font = "verdana";
il tipo di font da utilizzare
var grandezza = 2;
la grandezza del testo
Volendo, ovviamente, si può modificare anche a mano il codice HTML che costruirà la tabella contenente i record. Il codice da modificare è questo:
document.write("<tr " + color + ">");
document.write("<td width=10% align="center" valign=top><font face='"+font+"' size='"+grandezza+"'>"+ShowCount+"</font></td>");
document.write("<td width=60% align=left><font face='"+font+"' size='"+grandezza+"'>"+ToDoItem+"</font></td>");
document.write("<td width=15% align="center"><font face='"+font+"' size='"+grandezza+"'>"+"<a href='javascript:EditItem(" + ShowCount + "," + Count + ")'>Modifica</a></font></td>");
document.write("<td width=15% align="center"><font face='"+font+"' size='"+grandezza+"'>"+"<a href='javascript:DeleteItem(" + Count + ");'>Cancella</a></font></td>");
Attenzione comunque a non rimuovere variabili fondamentali per il funzionamento dello script.
A questo punto inseriamo il seguente codice nella corpo della pagina:
<table width=100% cellpadding="3" cellspacing="1" border="0" bgcolor="#000000">
<script type="text/javascript" language="javascript">
<!--
ListToDoItems();
//-->
</script>
</table>
Ciò che possiamo personalizzare, se lo desideriamo, è il codice iniziale della tabella.
In ultimo dobbiamo inserire i due link che permetteranno di aggiungere record oppure cancellarli tutti. I due link non fanno altro che richiamare due funzioni del codice:
<a href="javascript:AddItem()">Aggiungi un record</a>
<a href="javascript:DeleteCookie('PT_NumToDoList')">Cancella tutto</a>
Altre modifiche non sono necessarie.
