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>