How to Display a User’s Visited Web Pages

Allowing a developer to access a visitor’s browsing history is a huge security risk, that’s why it’s not possible. If you own a website that runs PHP with MySQL and handles sessions then this could be done by tracking IP addresses, user agents and so on to associate a browsing pattern with a particular person. This however can be pretty inaccurate, plus it’s only limited to your own website.

So what are we going to use? Well when you think about it, a user’s browsing history is stored on their computer, client-side. And what else runs client-side that us web developers can make? JavaScript and CSS. These are what we’re going to use.

Firstly, head on over to the visited demo page to view what you’ll be making.

The Page Links

To start off we’ll set up our list of links:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<p>
  <a id="btn-all" href="#">All</a> <a id="btn-visited" href="#">Visited</a> <a id="btn-unvisited" href="#">Unvisited</a>
</p>
 
<div id="links">
 
<a href="http://stephenmcintyre.net/">http://stephenmcintyre.net/<br /></a>
<a href="http://stephenmcintyre.net/blog/fragment-anchor-php/">http://stephenmcintyre.net/blog/fragment-anchor-php/<br /></a>
<a href="http://stephenmcintyre.net/blog/kongregate-badge-feed-php/">http://stephenmcintyre.net/blog/kongregate-badge-feed-php/<br /></a>
<a href="http://stephenmcintyre.net/blog/opening-new-windows-with-standards-ompliance/">http://stephenmcintyre.net/blog/opening-new-windows-with-standards-ompliance/<br /></a>
<a href="http://stephenmcintyre.net/blog/guide-to-google-ajax-feed-api/">http://stephenmcintyre.net/blog/guide-to-google-ajax-feed-api/<br /></a>
<a href="http://stephenmcintyre.net/blog/custom-php-session-class/">http://stephenmcintyre.net/blog/custom-php-session-class/<br /></a>
<a href="http://stephenmcintyre.net/blog/let-your-database-do-it/">http://stephenmcintyre.net/blog/let-your-database-do-it/<br /></a>
<a href="http://stephenmcintyre.net/blog/fetch-content-using-php/">http://stephenmcintyre.net/blog/fetch-content-using-php/<br /></a>
<a href="http://stephenmcintyre.net/blog/addthis-api-social-bookmarks/">http://stephenmcintyre.net/blog/addthis-api-social-bookmarks/<br /></a>
<a href="http://stephenmcintyre.net/blog/jquery-parallax-scrolling/">http://stephenmcintyre.net/blog/jquery-parallax-scrolling/<br /></a>
 
</div>

Here we have a list of article links from this website, and above them are some links to control which of the elements we will be showing.

Note the <br/> inside the <a> tags. These make them display properly when some elements are removed. I was going to use an unordered list, but this looked much nicer.

Controlling the Page with JavaScript

Now, to let those top links control our list, we’ll give them some JavaScript.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
  $('#btn-all').click(function(){
    $('#links').removeClass('visited').removeClass('unvisited');
    return false;
  });
  $('#btn-visited').click(function(){
    $('#links').removeClass('unvisited').addClass('visited');
    return false;
  });
  $('#btn-unvisited').click(function(){
    $('#links').removeClass('visited').addClass('unvisited');
    return false;
  });
});
</script>

The top line fetches jQuery from the Google code repository.

Each nested part of the jQuery code in the next <script> tag sets a “click” event for each top link, and removes or adds CSS classes to show each element properly.

Note that the classes only tell the browser which mode we are currently in and do not check whether the pages have actually been visited. With some clever CSS, we can properly display the links for this purpose.

This JavaScript snippet can go anywhere on the page, since this bit of jQuery will only run once the rest of the content has loaded.

Visited and Unvisited Links in CSS

This is the key in separating out our links. Remember to put this code at the top of your page (in the <head> if it has one).

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

<style type="text/css">
a{
text-decoration:none;
}
a:hover{
text-decoration:underline;
}
#btn-all{
color:#333;
}
#btn-unvisited, #links a{
color:#06f;
}
#btn-visited, #links a:visited{
color:#d5d;
}
#links.unvisited a:visited, #links.visited a{
display:none;
}
#links.visited a:visited, #links.unvisited a{
display:inline;
}
</style>

The useful part here is the :visited pseudo selector, which tells your browser to take any elements linking to a page from your history and display them differently.

Take lines 17-19 for example. Clicking “Unvisited” will set the links div element to have an unvisited class. Thanks to the :visited selector and setting the style to display:none, this means that any links that you have visited will not be shown. This is what we want.

Also, if “Visited” has been clicked, all links will be hidden. The style below these lines then resets all visited links so that only those are shown.

Don’t worry if it seems a bit confusing, just paste the source from the visited demo page into an HTML editor and have a play around with it, see where it takes you.