localStorage如何实现记住浏览记录

localStorage如何实现记住浏览记录，我这里使用的 localStorage，数据完全保存在浏览器中，不会有影响服务器响应, 但是在 IE6/7 中不能使用！

1、建一个viewhistory.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;
        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 [];
    }
};
function historyList(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],
            // 这里需要注意把标题的class名替换掉
            "url": location.href // 这是 primaryKey
            // "time": ...
            // "author": ...
            // 这里可以写入更多相关内容作为浏览记录中的信息
        };
        viewHistory.addHistory(page);
    }
}

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
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104

2、在需要添加显示历史记录的地方添加：

复制代码<div id="historyList" >
  <h3>您刚刚看过如下文章：</h3>
</div>

1
2
3
4

3、调用脚本方法：

复制代码<script>
historyList({
    limit: 5,
    storageKey: 'historyList',
    primaryKey: 'url',
    addHistory:  true;
    titleSplit: '|'
});
</script>

limit 用于记录显示的条数和存储的条数，可自行修改条数
storyageKey 用于配置需要显示的id，也代表着localStorage保存这些历史记录的为一个值
primaryKey 用户表示存储字段中以什么字段作为数据唯一的判断（一般以url）
addHistory 是否添加历史记录，一般主页不需要保存，而文章页需要保存

如果你用的是 typecho 那可以用下面逻辑判断：
addHistory: <?php if ($this->is('post')) { ?> true <?php }else{ ?>false<?php } ?>,
titleSplit用于表示标题以什么作为切割，切割之后取第一截。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18