最近查看的 DIV，无需重新加载页面

Question

我想要一个由 javascript 脚本填充的“最近浏览的页面”div也由 cookie 维护以在会话之间持续存在。

注意：添加到 div 的“历史列表”的新页面包括单击 href 链接，该链接仅包含一个静态变量，因此只会将窗口向下移动，而不是获取一个全新的页面。例如这些链接：

<a class="link" href="#john">  <a class="link" href="#mary"> 

• 这是要显示的两个新项目。

这里有一些代码示例并不能真正解决我的问题，因为它们在同一页面上不包含静态变量 GET：

http://community.actinic.com/showthread.php?t=33229
http://wordpress.org/extend/plugins/last-viewed-posts/installation/

Answer 1

下面是一些应该使用 jQuery 做你想做的事情：

(function($){

    var history;

    function getHistory() {
        var tmp = $.cookie("history");
        if (tmp===undefined || tmp===null) tmp = "";
        if ($.trim(tmp)=="") tmp = [];
        else tmp = tmp.split("||");
        history = [];
        $.each(tmp, function(){
            var split = this.split("|");
            history.push({
                title: split[0],
                url: split[1]
            });
        });
    }

    function saveHistory() {
        var tmp = [];
        $.each(history, function(){
            tmp.push(this.title+"|"+this.url);
        });
        $.cookie("history",tmp.join("||"),{ expires: 60, path: "/" });
    }

    function addToHistory(title,url) {
        var newHistory = []
        $.each(history, function(){
            if (this.url!=url) newHistory.push(this);
        });
        history = newHistory;
        if (history.length>=10) {
            history.shift();
        }
        history.push({
            title: title,
            url: url
        });
        saveHistory();
        writeHistory();
    }

    function writeHistory() {
        var list = $("<ul />");
        $.each(history, function() {
            var element = $("<li />");
            var link = $("<a />");
            link.attr("href",this.url);
            link.text(this.title);
            element.append(link);
            list.append(element);
        });
        $("#history").empty().append(list);
    }

    $(document).ready(function(){
        getHistory();
        var url = document.location.href;
        var split = url.split("#");
        var title;
        if (split.length > 1) {
            title = $("#"+split[1]).text();
        } else {
            title = document.title;
        }
        if (title===undefined || title===null || $.trim(title)=="") title = url;
        addToHistory(title,url);
        url = split[0];
        $("a[href^='#']").click(function(){
            var link = $(this);
            var href = link.attr("href");
            var linkUrl = url+href;
            var title = $(href).text();
            if (title===undefined || title===null || $.trim(title)==="") title = linkUrl;
            addToHistory(title,linkUrl);
        });
    });

})(jQuery);

放入一个包含在所有页面中的 js 文件。您还需要在它之前包含 jquery.cookie.js (http://www.stilbuero.de/2006/09/17/cookie-plugin-for-jquery/)

您的页面必须采用以下两个测试页面的格式：

[history.html]

第一页

历史

链接

第 1 页 - 第 1 部分 第 1 页 - 第 2 部分 第 2 页 - 第 1 部分 第 2 页 - 第 2 部分

零件

首页第一部分

首页第二部分

正文>