浏览历史记录

  <script src="Scripts/json2.js" type="text/javascript"></script>
    <script type="text/javascript">
        var art_title = $("title").text(); //文章标题 
        var art_url = document.URL; //页面地址
        $(function () {
            //加载浏览历史记录
            GetBrowserHistoryFromCookie();
        });
        //历史浏览记录
        function GetBrowserHistoryFromCookie() {
            var art_title = $("title").text(); //文章标题 
            var art_url = document.URL; //页面地址
            if ($.cookie("HistoryRecord") == null) {
                var json = { "root": [{ "title": "" + art_title + "", "url": "" + art_url + ""}] };
                //将json对象转换为字符串
                var text = JSON.stringify(json);
                $.cookie("HistoryRecord", text);
            } else {
                //将字符串转换为Json
                var tempData = JSON.parse($.cookie("HistoryRecord"));
                if (tempData["root"].length >= 10) {
                    tempData["root"].shift()
                }
                tempData["root"].push({ "title":"" +art_title+"", "url": ""+art_url+"" });
                $.cookie("HistoryRecord", JSON.stringify(tempData));
            }
            $(".history ul").empty();
            for (var i =9; i >= 0; i--) {
                $(".history ul").append(" <li><a href=\"" + JSON.parse($.cookie("HistoryRecord"))["root"][i]["url"] + "\">" + JSON.parse($.cookie("HistoryRecord"))["root"][i]["title"] + "</a></li>"); 
            }
        }
    </script>


下面是一个简单的示例,展示如何使用 HTML 和 JavaScript 实现浏览历史记录功能。 HTML 代码: ```html <!DOCTYPE html> <html> <head> <title>浏览历史记录示例</title> </head> <body> <h1>浏览历史记录示例</h1> <p>点击下面的链接来添加浏览记录:</p> <ul id="history-list"> <li><a href="#" onclick="addHistory('http://www.example.com/page1', '页面 1')">页面 1</a></li> <li><a href="#" onclick="addHistory('http://www.example.com/page2', '页面 2')">页面 2</a></li> <li><a href="#" onclick="addHistory('http://www.example.com/page3', '页面 3')">页面 3</a></li> </ul> <p>浏览历史记录:</p> <ul id="back-list"></ul> </body> </html> ``` JavaScript 代码: ```javascript // 定义一个数组,用于存储浏览历史记录 var historyList = []; // 定义一个函数,用于添加浏览历史记录 function addHistory(url, title) { // 将新的浏览历史记录添加到数组中 historyList.push({url: url, title: title}); // 刷新浏览历史记录列表 refreshHistory(); } // 定义一个函数,用于刷新浏览历史记录列表 function refreshHistory() { // 获取用于显示浏览历史记录的列表元素 var backList = document.getElementById("back-list"); // 清空列表元素 backList.innerHTML = ""; // 遍历浏览历史记录数组,将每个历史记录添加到列表中 for (var i = 0; i < historyList.length; i++) { var history = historyList[i]; var li = document.createElement("li"); var a = document.createElement("a"); a.href = history.url; a.textContent = history.title; li.appendChild(a); backList.appendChild(li); } } ``` 在这个示例中,我们定义了一个用于存储浏览历史记录的数组 `historyList`,并且定义了两个函数:`addHistory` 和 `refreshHistory`。`addHistory` 函数用于添加新的浏览历史记录,并将其添加到数组中;`refreshHistory` 函数用于刷新浏览历史记录列表,遍历数组中的所有历史记录,并将它们添加到 HTML 页面中。 在 HTML 页面中,我们定义了一个用于显示浏览历史记录的列表元素 `back-list`,并在页面加载时调用 `refreshHistory` 函数,以便初始化浏览历史记录列表。 注意:这个示例只是一个简单的演示,实际的浏览历史记录功能可能需要更复杂的实现,比如记录用户的浏览时间,实现前进和后退功能等等。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值