Nessun risultato. Prova con un altro termine.
Guide
Notizie
Software
Tutorial

Record memorizzabili

Link copiato negli appunti

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.


Ti consigliamo anche