零基础建站培训介绍

当前位置:

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

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

方法/步骤

  1. 创建一个history.js文件,文件编码为UTF-8无BOM格式编码,保存在当前主题的images文件夹下;
  2. 在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);
        }
    }
  3. Dreamweaver cs6软件打开当前模板的头部模板header.php,放上以下的JS引入代码:
    
    
    <script type="text/javascript" src="<?php bloginfo('template_url'); ?>/images/history.js"></script>
  4. 在需要显示用户浏览记录的位置放上以下的DIV代码,即可显示用户的浏览记录了。
    
    
    <div id="recently_viewed"></div>
上一课: 下一课:

发表评论

*

* 绝不会泄露


零基础学建站就到学做网站论坛