Here is something that should do what you want using jQuery:
(function($){
var history;
function getHistory() {
var tmp = $.cookie("history");
if (tmp===undefined || tmp===null) tmp = "";
if ($.trim(tmp)=="") tmp = [];
else tmp = tmp.split("||");
history = [];
$.each(tmp, function(){
var split = this.split("|");
history.push({
title: split[0],
url: split[1]
});
});
}
function saveHistory() {
var tmp = [];
$.each(history, function(){
tmp.push(this.title+"|"+this.url);
});
$.cookie("history",tmp.join("||"),{ expires: 60, path: "/" });
}
function addToHistory(title,url) {
var newHistory = []
$.each(history, function(){
if (this.url!=url) newHistory.push(this);
});
history = newHistory;
if (history.length>=10) {
history.shift();
}
history.push({
title: title,
url: url
});
saveHistory();
writeHistory();
}
function writeHistory() {
var list = $("<ul />");
$.each(history, function() {
var element = $("<li />");
var link = $("<a />");
link.attr("href",this.url);
link.text(this.title);
element.append(link);
list.append(element);
});
$("#history").empty().append(list);
}
$(document).ready(function(){
getHistory();
var url = document.location.href;
var split = url.split("#");
var title;
if (split.length > 1) {
title = $("#"+split[1]).text();
} else {
title = document.title;
}
if (title===undefined || title===null || $.trim(title)=="") title = url;
addToHistory(title,url);
url = split[0];
$("a[href^='#']").click(function(){
var link = $(this);
var href = link.attr("href");
var linkUrl = url+href;
var title = $(href).text();
if (title===undefined || title===null || $.trim(title)==="") title = linkUrl;
addToHistory(title,linkUrl);
});
});
})(jQuery);
Put in a js file you include in all your pages. You also need to include jquery.cookie.js before it (http://www.stilbuero.de/2006/09/17/cookie-plugin-for-jquery/)
Your page must be formatted like these two test pages:
[history.html]
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.cookie.js"></script>
<script type="text/javascript" src="history.js"></script>
<title>My First Page</title>
</head>
<body>
<h2>PAGE ONE</h2>
<h3>History</h3>
<div id="history"></div>
<h3>Links</h3>
<a href="#part1">Page 1 -Part 1</a>
<a href="#part2">Page 1 -Part 2</a>
<a href="history2.html#part1">Page 2 - Part 1</a>
<a href="history2.html#part2">Page 2 - Part 2</a>
<h3>Parts</h3>
<h4 id="part1">Part 1 of the First Page</h4>
<h4 id="part2">Part 2 of the First Page</h4>
</body>
</html>
[history2.html]
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.cookie.js"></script>
<script type="text/javascript" src="history.js"></script>
<title>My Second Page</title>
</head>
<body>
<h2>PAGE TWO</h2>
<h3>History</h3>
<div id="history"></div>
<h3>Links</h3>
<a href="#part1">Page 2 - Part 1</a>
<a href="#part2">Page 2 - Part 2</a>
<a href="history.html#part1">Page 1 - Part 1</a>
<a href="history.html#part2">Page 1 - Part 2</a>
<h3>Parts</h3>
<h4 id="part1">Part 1 of the Second Page</h4>
<h4 id="part2">Part 2 of the Second Page</h4>
</body>
</html>
Note that the title used for the history block is the text of the tag targetted by the link if it's a #something href or the title of the page if it's not.
Any coder with some knowledge of jQuery could tweak it to your specific needs.