网站文章历史浏览记录

加上一个文章浏览记录区域，用户在这里找到最近他在这个网站看过的几个文章，通过这个功能可以挽留一下读者，比如: 某人经常通过搜索引擎进来网站，可能发现以前在这里也看过一些文章，比较合他口味，久而久之就能发展成常客。

实现原理

这个功能实现非常简单，平白一点来说就是找个地方将页面一些信息保存起来，如果页面两次被访问，新的内容覆盖掉旧的内容；在页面加载的时候，将保存的信息取出显示。

实现方法也很多，最土的是将内容保存在 cookie 中，但用 cookie 储存数据存在一些问题. 比如: cookie 是随 HTTP 响应一起被发送的, 会对服务器端响应时间产生一定程度的影响, 尤其是在使用 XMLHttpRequest 对象向服务器端发送或请求数据的时候。

利用 cookie 虽然比较土，但最实用，因为几乎可以兼容所有浏览器。我这里使用的 localStorage，数据完全保存在浏览器中，不会有影响服务器响应，但 IE6/7 中不能使用.

这里要完成以下几个功能点:

• 将存储内容转成数组对象, 因为 localStorage 只能保存字符串；
• 去重, 如果保存的内容已经存在, 则删除旧数据, 以最新的为准；
• 限制保存数量, 没有必要无限保存历史导致列表超长。

实现步骤

下载 View History 的脚本：http://pan.baidu.com/s/1sjJII41

1. 引用脚本并初始化对象

<script src="view-history.js"></script>
<script>
/* <![CDATA[ */
if(typeof localStorage !== 'undefined' && typeof JSON !== 'undefined') {
    var viewHistory = new ViewHistory();
    viewHistory.init({
        limit: 5,
        storageKey: 'viewHistory',
        primaryKey: 'url'
    });
}
/* ]]> */
</script>

2. 在文章页面保存浏览信息

<script>
/* <![CDATA[ */
// 如果 ViewHistory 的实例存在，则可以将页面信息写入。
if(viewHistory) {
    var page = {
        "title": document.getElementsByTagName('title')[0].innerHTML,
        "url": location.href // 这是 primaryKey
        // "time": new Date()
        // "author": ...
        // 这里可以写入更多相关内容作为浏览记录中的信息
    };
    viewHistory.addHistory(page);
}
/* ]]> */
</script>

3. 显示历史浏览记录

<script>
/* <![CDATA[ */
var wrap = document.getElementById('view-history');
 
// 如果 ViewHistory 的实例存在，并且外层节点存在，则可显示历史浏览记录
if(viewHistory && wrap) {
    // 获取浏览记录
    var histories = viewHistory.getHistories();
 
    // 组装列表
    var list = document.createElement('ul');
    if(histories && histories.length > 0) {
        for(var i=histories.length-1; i>=0; i--) {
            var history = histories[i];
 
            var item = document.createElement('li');
            var link = document.createElement('a');
            link.href = history.url;
            link.innerHTML = history.title;
 
            item.appendChild(link);
            list.appendChild(item);
        }
 
        // 插入页面特定位置
        wrap.appendChild(list);
    }
}
/* ]]> */
</script>

只用 localStorage 做历史浏览记录不能解决时效性问题，也就是不能获得最新的文章信息，如果我将文章评论数加到浏览记录中， 那么用户看到的仅是他访问当时的评论数量，解决办法是有的，有些网站只保存文章的 ID，在页面加载时再动态加载文章信息，比如: 评论数和平均评价。其实作为博客保存到 localStorage 已经足够了。