Hej igen,
Jeg har lavet et eksempel til dig hvor den bruger cookies til at gemme indholdet af array'et. De nye metoder der er tilføjet er:
init() : Denne kalde ved onload på body tag'en
saveArrayToCookie() : Gemmer array'et til en cookie
loadArrayFromCookie() : Loader array'et fra en cookie
createCookie(name, value, days) : Hjælpe metode til at lave cookies
getCookie(name) : Hjælpe metode til at hente cookies
Desuden er saveArrayToCookie() tilføjet til addToList(id) og removeListe(id) metoderne. Så nu skrives der til cookien hver gang der slettes eller tilføjes et element i listen. loadArrayFromCookie() bliver så kaldt i init() metoden når siden loades.
Håber du kan finde rundt i hvad det er jeg laver. ;) Men du burde kunne lave din side ud fra mit eksempel her.
<html xmlns="
http://www.w3.org/TR/html401"> <head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
<script type="text/JavaScript">
var mylist=new Array();
var cookieName = "list";
function clearArray()
{
mylist = new Array();
}
function init()
{
loadArrayFromCookie();
udskriv();
}
function saveArrayToCookie()
{
var strArray = "";
for(var i = 0; i < mylist.length; i++)
strArray += mylist[i] + ((i < mylist.length-1) ? ":" : "");
createCookie(cookieName, strArray, -1);
}
function loadArrayFromCookie()
{
clearArray();
var strArray = getCookie(cookieName);
if(strArray == null || strArray == "" )
return;
mylist = strArray.split(':');
}
function addToList(id)
{
mylist.push(id);
saveArrayToCookie();
udskriv();
return false;
}
function removeListe(id)
{
mylist.splice(id, 1);
saveArrayToCookie();
udskriv();
return false;
}
function scrollToElement(elm)
{
var intPosX = 0;
var intPosY = 0;
var element = elm;
while(elm != null)
{
intPosX += elm.offsetLeft;
intPosY += elm.offsetTop;
elm = elm.offsetParent;
}
window.scrollTo(intPosX,intPosY);
element.focus();
}
function udskriv()
{
var e = document.getElementById("klikkede");
//Slet eventuelt eksisterende indhold af 'klikkede' div tag'en.
clearNode(e);
for (var i=0; i < mylist.length; i++)
{
var imgPath = "URL" + mylist[i];
var imgNew = document.createElement("img");
imgNew.setAttribute("src", imgPath);
imgNew.setAttribute("width", "80");
imgNew.setAttribute("height", "60");
var p = document.createElement('p');
var a = document.createElement('a');
a.setAttribute("href", "#");
a.setAttribute("name", "kjhsdbhbvhsI");
a.setAttribute("value", "hjuigbugy");
a.onclick = Function('removeListe(' + i + ')');
a.appendChild(imgNew);
p.appendChild(a);
e.appendChild(p);
e.appendChild(document.createTextNode("number: " + i));
}
scrollToElement(e);
}
function addEvent(elm, evType, fn)
{
if (elm.addEventListener)
{
elm.addEventListener(evType, fn, false);
return true;
}
else
{
var r = elm.attachEvent('on' + evType, fn);
return r;
}
}
function clearNode(node)
{
while(node.childNodes.length > 0)
node.removeChild(node.childNodes[0]);
}
function createCookie(name, value, days)
{
if (days)
{
var date = new Date();
date.setTime(date.getTime() + (days*24*60*60*1000));
var expires = "; expires="+date.toGMTString();
}
else
var expires = "";
if(days != -1)
document.cookie = name+"="+value+expires;
else
document.cookie = name+"="+value;
}
function getCookie( name )
{
var start = document.cookie.indexOf( name + "=" );
var len = start + name.length + 1;
if ( ( !start ) && ( name != document.cookie.substring( 0, name.length ) ) )
{
return null;
}
if ( start == -1 )
return null;
var end = document.cookie.indexOf( ";", len );
if ( end == -1 )
end = document.cookie.length;
return unescape( document.cookie.substring( len, end ) );
}
</script>
</head>
<body onload="init();">
<table>
<tr>
<td>
<a href="#" onclick="return addToList('dot_1.gif');">ladida</a>
</td>
</tr>
<tr>
<td>
<a href="#" onclick="return addToList('dot_2.gif');">hutlihut</a>
</td>
</tr>
<tr>
<td>
<input type="button" value="Udskriv array" id="btnOut" onclick="udskriv();" />
<input type="button" value="Clear array" id="btnClear" onclick="clearArray();" />
</td>
</tr>
<tr>
<td style="padding-top: 1000px;">
Her kommer indholdet af arrayet:
<div id="klikkede"></div>
</td>
</tr>
</table>
</body>
</html>
Mvh.
CS
