As many on this forum have done, I have created a number of applications with quite a few options. I've notice, however, that most users tend to favor certain pages. Now, I wanted to give them a means of finding their most popular links, but didn't want to log every page they go to and run massive queries just for a bit of convenience. With browser-side caching now available, I thought that this would be a perfect opportunity to use that feature to allow users to be able to view their personally-most-visited pages.
Along those lines, I've created the following:
JS File: popular_history.js
Code:
function PopularHistory() {
this.log = function() {
if (!window.localStorage) return;
var current_history = [];
if (window.localStorage.popular_history) {
current_history = window.localStorage.popular_history.split("\n");
}
var found_url = false;
if (current_history.length > 0) {
for (var i=0; i<current_history.length; i += 2) {
if (current_history[i] == location.href) {
current_history[i+1]++;
found_url = true;
break;
}
}
}
if (!found_url) {
current_history.push(location.href);
current_history.push(1);
}
window.localStorage.popular_history = "";
var prefix = "";
for (var i=0; i<current_history.length; i++) {
window.localStorage.popular_history += prefix + current_history[i];
prefix = "\n";
}
}
this.show = function(target) {
if (!window.localStorage) return;
if (window.localStorage.popular_history) {
var html_output = "";
var top_10_links = [{url:"", count:0}, {url:"", count:0}, {url:"", count:0}, {url:"", count:0}, {url:"", count:0}, {url:"", count:0}, {url:"", count:0}, {url:"", count:0}, {url:"", count:0}, {url:"", count:0}];
current_history = window.localStorage.popular_history.split("\n");
var smallest_index = 0;
for (var i=0; i<current_history.length; i += 2) {
//If current count > min count of all other top_10, then replace smallest
for (var j=0; j<10; j++) {
//Find index of smallest value
if (top_10_links[smallest_index].count > top_10_links[j].count) {
smallest_index = j;
}
}
if (current_history[i+1] > top_10_links[smallest_index].count) {
top_10_links[smallest_index].url = current_history[i];
top_10_links[smallest_index].count = current_history[i+1];
}
}
for (var j=0; j<10; j++) {
if (top_10_links[j].count > 0) {
html_output += '<a href="'+top_10_links[j].url+'" class="popular_history_link">'+top_10_links[j].url+'</a><br>';
}
}
document.getElementById(target).innerHTML = html_output;
} else {
document.getElementById(target).innerHTML = 'Error detecting history!';
}
}
this.reset = function () {
window.localStorage.popular_history = "";
}
}
var popular_history = new PopularHistory();
popular_history.log();
HTML Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Popular History Demo</title>
<script src="popular_history.js"></script>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"><!-- Makes HTML 5 elements available for styling --></script>
</head>
<body>
<nav id="main_nav">
<a href="index.html">Index</a>
<a href="index2.html">Index 2</a>
<a href="index3.html">Index 3</a>
</nav>
<div onclick="popular_history.show('history_log');">Show History</div> <div onclick="popular_history.reset();">Reset History</div>
<nav id="history_log">
</nav>
</body>
</html>
For testing, I named the HTML file above to index.html, index2.html, and index3.html. Seems to work to me, but I'd like your input. Specifically, the routine where I track the smallest value and then replace it with a more-frequently-visited page just doesn't sit right with me -- I'd think there's a better way.
Of course, I didn't take the time to pretty it up, yet, but it does demo the feature.
Any feedback?
Oh, and if you like the idea, please feel free to steal it -- though, we all do like a little bit of attribution.
P.S. I'd probably replace if (!window.localStorage) return; in the show function with a message saying to use a browser from this millenium.
