How to save onclick event in cookie?

M

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
 
J

Jedi Fans

Marco said:
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>
 
M

Marco Krechting

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

Marco
 
J

Jedi Fans

Marco said:
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]
 
M

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

Jedi Fans said:
Marco said:
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]
 
R

RobG

Marco said:
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.

[...]
 
S

Stephen Chalmers

Marco Krechting said:
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>
 
M

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

Stephen Chalmers said:
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',
 
S

Stephen Chalmers

Marco Krechting said:
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.
 
M

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
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
474,434
Messages
2,571,685
Members
48,796
Latest member
Greg L.

Latest Threads

Top