Cookie Crumbs

This bit of JavaScript allows you to place a breadcrumb type trail of history on a page. This shows the user where they have been on the site and allows them to navigate back with a little more detail. So to achieve this the code will save in a cookie where the user has been and build up the crumbs every time they go to somewhere new. The cookie holds the link to the page they visited and the title of the page for a readable description.

To get the crumbs set up and working all you need to do is include the .js file on your web pages and then write the following JavaScript where ever you wish to show the crumbs. The number you pass in is the number of crumbs you want to show on the page, in this case 3. To show all history crumbs pass in -1.

<script>document.write(CookieCrumbs(3).GetCrumbs());</script>

The code fails gracefully on any errors or if the client browser has cookies turned off. It just writes an empty string to the page in those cases. We are using cookies here so the script will recognise when the user has started a new session on your domain and clear out any old cookies they may have from previous visits so as to start the crumbs from fresh (as long as you have the crumbs on the first page the user hits your domain at). Failing this there is a DeleteCookieTrail() function which you may call to clear out old history.

So if your still reading then I assume you actually want to see these crumbs in action. I have set up a test environment with 5 pages so that you can navigate around and see your history being built up here.

Download the source
Demo Page

Tested to work in the following browsers;

• IE 7 & 6
• FireFox 2.0.0.11
• Opera 9.24
• Safari for windows