wordpress网站显示本地用户的浏览记录

网站显示用户的浏览记录功能在商城网站建设中经常见到，可以记录已浏览的商品的列表。使用wordpress建网站，同样也可以制作这样的显示用户的浏览记录功能。

创建一个history.js文件，文件编码为UTF-8无BOM格式编码，保存在当前主题的images文件夹下；在history.js文件里粘贴以下的JS代码，然后保存。

ViewHistory = function() {
 
    this.config = {
        limit: 10,
        storageKey: 'viewHistory',
        primaryKey: 'url'
    };
 
    this.cache = {
        localStorage:  null,
        userData:  null,
        attr:  null
    };
};
 
ViewHistory.prototype = {
 
    init: function(config) {
        this.config = config || this.config;
        var _self = this;
 
        // define localStorage
        if (!window.localStorage && (this.cache.userData = document.body) && this.cache.userData.addBehavior && this.cache.userData.addBehavior('#default#userdata')) {
            this.cache.userData.load((this.cache.attr = 'localStorage'));
 
            this.cache.localStorage = {
                'getItem': function(key) {
                    return _self.cache.userData.getAttribute(key);
                },
                'setItem': function(key, value) {
                    _self.cache.userData.setAttribute(key, value);
                    _self.cache.userData.save(_self.cache.attr);
                }
            };
 
        } else {
            this.cache.localStorage = window.localStorage;
        }
    },
 
    addHistory: function(item) {
        var items = this.getHistories();
        for(var i=0, len=items.length; i<len; i++) {
            if(item[this.config.primaryKey] && items[i][this.config.primaryKey] && item[this.config.primaryKey] === items[i][this.config.primaryKey]) {
                items.splice(i, 1);
                break;
            }
        }
 
        items.push(item);
 
        if(this.config.limit > 0 && items.length > this.config.limit) {
            items.splice(0, 1);
        }
 
        var json = JSON.stringify(items);
        this.cache.localStorage.setItem(this.config.storageKey, json);
    },
 
    getHistories: function() {
        var history = this.cache.localStorage.getItem(this.config.storageKey);
        if(history) {
            return JSON.parse(history);
        }
        return [];
    }
};
 
if(typeof localStorage !== 'undefined' && typeof JSON !== 'undefined') {
    var viewHistory = new ViewHistory();
    viewHistory.init({
        limit: 5,
        storageKey: 'viewHistory',
        primaryKey: 'url'
    });
}
 
var wrap = document.getElementById('recently_viewed');
// 如果 ViewHistory 的实例存在，则可以将页面信息写入。
if(viewHistory) {
    var page = {
        "title": document.getElementsByTagName('title')[0].innerHTML,
        "url": location.href // 这是 primaryKey
        // "time": new Date()
        // "author": ...
        // 这里可以写入更多相关内容作为浏览记录中的信息
    };
    viewHistory.addHistory(page);
} 
// 如果 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 historyItem = histories[i];
 
            var item = document.createElement('li');
            var itemLink = document.createElement('a');
            itemLink.href = historyItem.url;
            itemLink.innerHTML = historyItem.title;
 
            item.appendChild(itemLink);
            list.appendChild(item);
        }
 
        // 插入页面特定位置
        wrap.appendChild(list);
    }
}

打开当前模板的头部模板header.php，放上以下的JS引入代码：

<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/images/history.js"></script>

在需要显示用户浏览记录的位置放上以下的DIV代码，即可显示用户的浏览记录了。

<div id="recently_viewed"></div>