设置

软件中心

万能驱动

好站推荐

网站地图

你的位置: 首页 实用技巧 阅读文章     灰色显示     正常显示     从天而下     桔色成人

wordpress保存文章浏览历史,记录你的浏览足迹(非插件版)

[ 2013-04-30 ] 分类:实用技巧


8,270
 

fenxiang

 

比如历史浏览记录,用户在历史浏览记录中找到最近他在这个网站看过的几个文章,我希望通过这个功能挽留一下读者。

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

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

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

第一步:引入viewhistory.js

下面就是ViewHistory脚本,将下面代码存为.JS文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
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 [];
    }
};

第二步:添加脚本

核心代码是上面部分,不过小林还封装了方法给页面调用,小林建议,如果是自己控制js的话,最好把所有js合并成一个(好处随便说2个:1、减少请求次数,2、缓存)参考如下:

function linove_viewHistory(config){
    if(typeof localStorage !== 'undefined' && typeof JSON !== 'undefined') {

        var viewHistory = new ViewHistory();
        viewHistory.init({
            limit: config.limit,
            storageKey: config.storageKey,
            primaryKey: config.primaryKey
        });
    }

    var wrap = document.getElementById(config.storageKey);
    if(!viewHistory){
        if(wrap){
            wrap.style.display = 'none';
        }
        return;
    }
    // 如果 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);
        }
    }
    if( viewHistory && config.addHistory) {
        var page = {
            "title": document.getElementsByTagName('title')[0].innerHTML.split(config.titleSplit)[0],
            "url": location.href // 这是 primaryKey
            // "time": new Date()
            // "author": ...
            // 这里可以写入更多相关内容作为浏览记录中的信息
        };
        viewHistory.addHistory(page);
    }
}

第三步:在需要添加显示历史记录的地方添加

<div id="viewHistory" >
    <h3>您的足迹</h3>
</div>

第四步,调用脚本方法

你可以在document.onload事件中添加下面代码,也可以在前添加下面脚本

linove_viewHistory({
    limit: 5,
    storageKey: 'linove_viewHistory',
   primaryKey: 'url',
    addHistory:  true;
   titleSplit: '|'
});
  • limit用于记录显示的条数和存储的条数
  • storyageKey用于配置需要显示的id,也代表着localStorage保存这些历史记录的为一个值
  • primaryKey用户表示存储字段中以什么字段作为数据唯一的判断(一般以url)
  • addHistory是否添加历史记录,一般主页不需要保存,而文章页需要保存

如果你用的是wordpress那可以用下面逻辑判断

addHistory:  <?php if ( is_single() ) { ?> true <?php }else{ ?>false<?php } ?>

结束语

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



无觅相关文章插件,快速提升流量

郑重声明:请尊重本站作者的劳动成果,未经允许,请不要复制转载奇云网的页面内容,鄙视各种无耻的采集粘贴行为!本站个别内容来源于网络,版权归原作者所有,奇云网无版权责任!




wordpress保存文章浏览历史,记录你的浏览足迹(非插件版)
0 票 [ 贝氏评级 ] 0.00 含金量 0%
  1. 有時候,我們願意原諒一個人,並不是我們真的願意原諒他,而是我們不想失去他。不想失去他,惟有假裝原諒他。恨,也是一種愛。歲月漫長,裝著裝著也許真的就能夠原諒與遺忘

  2. ⇂⇂⇂⇂⇂⇂⇂⇂⇂成人丝袜射⇂⇂⇂⇂⇂⇂⇂⇂⇂
    ⇂⇂⇂⇂⇂⇂⇂⇂⇂新美腿标准i6腿⇂⇂⇂⇂⇂⇂⇂⇂⇂
    ⇂⇂⇂⇂⇂⇂⇂⇂⇂高跟黑丝袜⇂⇂⇂⇂⇂⇂⇂⇂⇂
    ⇂⇂⇂⇂⇂⇂⇂⇂⇂性感丝袜⇂⇂⇂⇂⇂⇂⇂⇂⇂
    ⇂⇂⇂⇂⇂⇂⇂⇂⇂穿丝袜的女孩⇂⇂⇂⇂⇂⇂⇂⇂⇂
    ⇂⇂⇂⇂⇂⇂⇂⇂⇂丝袜高跟脚⇂⇂⇂⇂⇂⇂⇂⇂⇂
    ⇂⇂⇂⇂⇂⇂⇂⇂⇂丝袜图网站⇂⇂⇂⇂⇂⇂⇂⇂⇂
    meitui1.com

立即下载
收起
展开