How to save onclick event in cookie?

[Marco Krechting]

Hi All,

I have a page with a list of hyperlinks.
I want to save information in a cookie about the fact that I entered an
hyperlink or not.
When I click one of the hyperlinks I want this stored in a cookie and a
small bullit shown in front of the hyperlink,
so when I reload the page I can immediately see which hyperlinks I already
visited that day.

The information should be cleared after a day. Or maybe a button which
clears the info in the cookie so I can
start from scratch.

Can this be done and how?

Regards
Marco
The Netherlands

 

[Jedi Fans]

Hi All,

I have a page with a list of hyperlinks.
I want to save information in a cookie about the fact that I entered an
hyperlink or not.
When I click one of the hyperlinks I want this stored in a cookie and a
small bullit shown in front of the hyperlink,
so when I reload the page I can immediately see which hyperlinks I already
visited that day.

The information should be cleared after a day. Or maybe a button which
clears the info in the cookie so I can
start from scratch.

Can this be done and how?

Regards
Marco
The Netherlands

well it can easily be accomplished with pure css and browser behaviour
about visited links, although not sure about the clearing of the visited
links...
<style type="text/css"><!--
a:visited{
margin-left:10px;
background:URL('http://pathtobulletimage.com/folder/bullet.gif')
no-repeat left center;
}
//--></style>

 

[Marco Krechting]

Will this be saved even if I close the browser and restart it at a later
time?

Marco

 

[Jedi Fans]

Will this be saved even if I close the browser and restart it at a later
time?

Marco

it would be stored as per the settings used for browser history... so it
depends what you have your browser set to,... of course this may not be
the behaviour you require as it history is a global thing meaning if
history cleared it clears all history [and this has to be done manually]

 

[Marco Krechting]

Exactly,

No I really need this done in Javascript.
There must be a way to store an link ID as a var in a cookie.

Marco

Will this be saved even if I close the browser and restart it at a later
time?

Marco

it would be stored as per the settings used for browser history... so it
depends what you have your browser set to,... of course this may not be
the behaviour you require as it history is a global thing meaning if
history cleared it clears all history [and this has to be done manually]

 

[RobG]

Exactly,

No I really need this done in Javascript.
There must be a way to store an link ID as a var in a cookie.

Please do not top post.

Give your links an ID. When they are clicked on, store the ID in a
cookie. When your page loads, modify the class of any element whose ID
is stored in the cookie to your special 'visited' class.

You can set the cookie to expire whenever you like, or provide a 'clear
the cookie' button, or store a date with each ID so you can expire them
individually, or show those visited today, yesterday, last week, etc.
You could even expire links selectively - it's only limited by your
imagination and ability to code JavaScript.

Here's a link to get you going:

<URL:http://www.quirksmode.org/js/cookies.html>

Note that any solution will be limited to the amount of data that a
cookie can hold (which varies by browser and isn't very much - don't
count on more than 4k). You could store the actual href string instead
of an ID, but that would take up more space.

[...]

 

[Stephen Chalmers]

Hi All,

I have a page with a list of hyperlinks.
I want to save information in a cookie about the fact that I entered an
hyperlink or not.
When I click one of the hyperlinks I want this stored in a cookie and a
small bullit shown in front of the hyperlink,
so when I reload the page I can immediately see which hyperlinks I already
visited that day.

The information should be cleared after a day. Or maybe a button which
clears the info in the cookie so I can
start from scratch.

Can this be done and how?

Regards
Marco
The Netherlands

This code creates one session cookie comprised of the coded indices of all the clicked links, so the data survives as
long as the browser is running. To extend the duration to one day, change
setCookie('myVLinks', vLinks, 0);
to
setCookie('myVLinks', vLinks, 1);

Not knowing what cookie code you use, I have included two simplified cookie functions to make a working example.

There is no need to add any code to the links and the cookie should be able to store hundreds of indices.

The string parameter passed to the initLinks function is the name of the cookie to be used. If the code is used on more
than one page, this parameter must be different on each.

For simplicity, it's restricted to browsers supporting .innerHTML

To test the code, save it as: visited.htm

<HTML>
<HEAD>

<SCRIPT type='text/javascript'>
function readCookie(cookieName)
{
var cOffset=-1,wantedData="", wantedEndPoint;

if(typeof document.cookie!='undefined')
{
if( (cOffset=document.cookie.indexOf(cookieName)) >-1 )
{
cOffset+=cookieName.length+1;

if( ( wantedEndPoint=(document.cookie.substring(cOffset,document.cookie.length).indexOf(';')) ) ==-1)
wantedEndPoint=document.cookie.length;

wantedData=document.cookie.substring(cOffset,cOffset+wantedEndPoint);
}
}

return wantedData;
}


function setCookie(cookieName, cookieValue, daysDuration)
{
var cs="";

if(typeof document.cookie!='undefined')
{
cs=cookieName+"="+cookieValue;
now=new Date();

if(daysDuration)
cs+=";expires=" + new Date(new Date().setDate(now.getDate()+daysDuration)).toGMTString();

document.cookie=cs;
}

return cs;
}

function linkRecord(cookieName, idx ) /* append link index to cookie string */
{
var vLinks=readCookie(cookieName);

if(vLinks.indexOf("L"+idx+',')==-1)
vLinks += "L"+idx+',';

setCookie(cookieName, vLinks, 0);
}

function initLinks(cookieName)
{
for(var i=0, ll=document.links.length; i<ll; i++)
document.links.onclick=new Function("linkRecord('"+cookieName+"',"+i+");")

if( (vLinks=readCookie(cookieName))!='' ) /* prefix bullet if data available and link index found */
{
if(document.links && document.links[0].innerHTML)
for(var i=0, ll=document.links.length; i<ll; i++)
if( vLinks.indexOf( "L" + i +',')!=-1 )
document.links.innerHTML='.'+document.links.innerHTML;
}

}
</SCRIPT>
</HEAD>

<BODY>
<A HREF='visited.htm'>Link to this page</A><BR><BR>
<A HREF='visited.htm'>Link to this page</A><BR><BR>
<A HREF='visited.htm'>Link to this page</A><BR><BR>
<A HREF='visited.htm'>Link to this page</A><BR><BR>

<SCRIPT type='text/javascript'>
// Optional cookie deleter
document.write("<A HREF=\"javascript:void(setCookie('myVLinks', '0', -1))\">Delete Cookie</A>");

initLinks('myVLinks'); /* use a different name in each document that uses the script*/

</SCRIPT>
</BODY>
</HTML>

 

[Marco Krechting]

This is great but can you have more than one cookie on a page?
I already use a cookie on my page:

function GetCookie(name){
arg=name+"=";i=0
while(i<d.cookie.length){
j=i+arg.length
if(d.cookie.substring(i,j)==arg)
{endstr=d.cookie.indexOf(";",j)
if(endstr==-1)endstr=d.cookie.length
return unescape(d.cookie.substring(j,endstr))}
i=d.cookie.indexOf(" ", i)+1
if(i==0)break}return null}

function setCookie(name,value){
if(value!=null&&value!="")
{var today=new Date();var expiry=new Date(today.getTime()+31536000000)

d.cookie=name+"="+escape(value)+";expires="+expiry.toGMTString()+";path=/"}}


Marco

This code creates one session cookie comprised of the coded indices of all

the clicked links, so the data survives as

long as the browser is running. To extend the duration to one day, change
setCookie('myVLinks', vLinks, 0);
to
setCookie('myVLinks', vLinks, 1);

Not knowing what cookie code you use, I have included two simplified

cookie functions to make a working example.

There is no need to add any code to the links and the cookie should be

able to store hundreds of indices.

The string parameter passed to the initLinks function is the name of the

cookie to be used. If the code is used on more

than one page, this parameter must be different on each.

For simplicity, it's restricted to browsers supporting .innerHTML

To test the code, save it as: visited.htm

<HTML>
<HEAD>

<SCRIPT type='text/javascript'>
function readCookie(cookieName)
{
var cOffset=-1,wantedData="", wantedEndPoint;

if(typeof document.cookie!='undefined')
{
if( (cOffset=document.cookie.indexOf(cookieName)) >-1 )
{
cOffset+=cookieName.length+1;

if( (

wantedEndPoint=(document.cookie.substring(cOffset,document.cookie.length).in
dexOf(';')) ) ==-1)

wantedEndPoint=document.cookie.length;

wantedData=document.cookie.substring(cOffset,cOffset+wantedEndPoint);
}
}

return wantedData;
}


function setCookie(cookieName, cookieValue, daysDuration)
{
var cs="";

if(typeof document.cookie!='undefined')
{
cs=cookieName+"="+cookieValue;
now=new Date();

if(daysDuration)
cs+=";expires=" + new Date(new Date().setDate(now.getDate()+daysDuration)).toGMTString();

document.cookie=cs;
}

return cs;
}

function linkRecord(cookieName, idx ) /* append link index to cookie string */
{
var vLinks=readCookie(cookieName);

if(vLinks.indexOf("L"+idx+',')==-1)
vLinks += "L"+idx+',';

setCookie(cookieName, vLinks, 0);
}

function initLinks(cookieName)
{
for(var i=0, ll=document.links.length; i<ll; i++)
document.links.onclick=new Function("linkRecord('"+cookieName+"',"+i+");")

if( (vLinks=readCookie(cookieName))!='' ) /* prefix bullet if data

available and link index found */

{
if(document.links && document.links[0].innerHTML)
for(var i=0, ll=document.links.length; i<ll; i++)
if( vLinks.indexOf( "L" + i +',')!=-1 )
document.links.innerHTML='.'+document.links.innerHTML;
}

}
</SCRIPT>
</HEAD>

<BODY>
<A HREF='visited.htm'>Link to this page</A><BR><BR>
<A HREF='visited.htm'>Link to this page</A><BR><BR>
<A HREF='visited.htm'>Link to this page</A><BR><BR>
<A HREF='visited.htm'>Link to this page</A><BR><BR>

<SCRIPT type='text/javascript'>
// Optional cookie deleter
document.write("<A HREF=\"javascript:void(setCookie('myVLinks',

 

[Stephen Chalmers]

This is great but can you have more than one cookie on a page?

Yes - the restriction is on their total size, which may apply to the whole domain, but I don't know the exact rules or
their consistency.

 

[marcokrechting]

Stephen,

I tried to implement your code and I think it is just what I need exept
that My links are build up in Javascript so the link thing doesn't
work. Here's a snapshot Of my code, maybe you can think of a way
around:

d=document;zoek2=0;tel=0;function telt(){tel++;return tel};
a="<"+"a href='";
b2="<"+"a href='http://cww.";
L="</"+'a><br>';

function HW(link,tekst,clipdata) {
target=telt();
if (wi==1) {
target="_top";
}

text2write = b2 + link + "'" + tag + target + "'";
text2write += "onclick='setClip(\"" + clipdata + returnDate() +
"\");";
text2write +=
"n(\""+target+"\",\""+"http://cww."+link+"\",\""+tekst+"\")'";
text2write += ">" + tekst + L;

h(text2write);
}

function setClip(clipdata) {
if (window.clipboardData) {
window.clipboardData.setData('text', clipdata);
}
}

function n(target,naam,stat){
if(stat==null||stat=='')wo=(naam.substring(7,naam.length));else
wo=stat
link=""
for(t=1;t<=wo.length;t++)
{if(wo.substring(t-1,t)=="."||wo.substring(t-1,t)=="/"||wo.substring(t-1,t)==";"||wo.substring(t-1,t)=="&")link+="-"
else link+=wo.substring(t-1,t)}
sd=new Date();arnostat(escape(link));
if(wi==0){if (parseInt(navigator.appVersion)>=4){
target=window.open("",target,y+((screen.width/100)*80)+",height="+(((screen.height/100)*85)-200)+",left="+((screen.width/100)*9)+",top="+((screen.height/100)*14))}
else {target=window.open("",target(),y+"600,height=280")}}
if(wi==1)top.location=naam
if(wi==2){if(parseInt(navigator.appVersion)>=4){
target=window.open("",target,y+((screen.width/100)*99)+",height="+(((screen.height/100)*107)-200)+",left=0,top=0")}
else{target=window.open("",target,y+"600,height=280")}}
if(wi==3)target=window.open("",target);
if (zoek2==1){zoek2=0; target.location=site;}
if (wi!=1) target.focus()}

<SCRIPT language=javascript>

HW('myweblink/2005/Rep','Reports 2005','MWL.BRIEF.2005.') Etc...

</SCRIPT>

I think I should alter the function to read if the link was visited or
not but how to rebuild the screen? Any suggestions?

Many Regards,
Marco