使用Cookies保存网站历史浏览记录实例代码-前端开发

下面是使用 Cookies 保存网站历史浏览记录的完整攻略。

下面是使用 Cookies 保存网站历史浏览记录的完整攻略。

1. 需求分析

在网站上实现浏览记录的保存，主要的需求分析包括以下几点：

当用户浏览网站时，需要记录用户的浏览历史。
浏览历史需要以列表形式展示在网站上。
浏览历史需要随着用户的浏览动态更新。
浏览历史需要在用户关闭浏览器后依然能够保存。
用户进入网站时需要从 Cookies 中读取保存的浏览历史。

2. 实现思路

根据需求，我们可以将实现浏览历史的步骤分为以下几个部分：

每次用户访问网站时，使用 JavaScript 将当前页面的 URL 添加到浏览历史中。
将浏览历史以 JSON 格式保存到 Cookies 中。
在网站上展示保存在 Cookies 中的浏览历史。
在用户关闭浏览器时，将浏览历史保存到 Cookies 中。
在用户再次进入网站时，从 Cookies 中读取上一次保存的浏览历史。

3. 代码实现

我们可以使用 JavaScript 脚本来实现浏览历史的保存和读取。下面是一个示例代码，它可以将当前访问的页面 URL 添加到浏览历史中，并将浏览历史保存到 Cookies 中。

// 读取保存在 Cookies 中的浏览历史
function getHistory() {
  var history = [];
  var historyJson = getCookie("history");
  if (historyJson) {
    history = JSON.parse(historyJson);
  }
  return history;
}

// 将浏览历史保存到 Cookies 中
function saveHistory(url) {
  var history = getHistory();
  if (history.length >= 10) {
    history.shift();
  }
  history.push(url);
  setCookie("history", JSON.stringify(history), 30);
}

// 添加当前访问的页面 URL 到浏览历史中
function addHistory() {
  if (location.pathname != "/") {
    saveHistory(location.pathname);
  }
}

// 读取 Cookies 中指定名称的值
function getCookie(name) {
  var cookies = document.cookie.split("; ");
  for (var i = 0; i < cookies.length; i++) {
    var cookie = cookies[i].split("=");
    if (cookie[0] == name) {
      return cookie[1];
    }
  }
  return null;
}

// 设置 Cookies 中指定名称和值
function setCookie(name, value, expiredays) {
  var exdate = new Date();
  exdate.setDate(exdate.getDate() + expiredays);
  document.cookie = name + "=" + value + ";expires=" + exdate.toUTCString();
}

上述代码中，getHistory 函数用于从 Cookies 中读取保存的浏览历史列表，saveHistory 函数用于将当前页面的 URL 添加到浏览历史中并保存到 Cookies 中，addHistory 函数则用于在每次页面加载时调用 saveHistory 函数。

下面是一个简单的 HTML 示例页面，展示了如何在网站上展示保存在 Cookies 中的浏览历史列表。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>浏览历史示例页面</title>
</head>
<body onload="loadHistory()">
  <h1>浏览历史</h1>
  <ul id="history"></ul>
  <script>
    // 加载保存在 Cookies 中的浏览历史
    function loadHistory() {
      var history = getHistory();
      var historyList = document.getElementById("history");
      for (var i = 0; i < history.length; i++) {
        var item = document.createElement("li");
        var link = document.createElement("a");
        link.href = history[i];
        link.innerHTML = history[i];
        item.appendChild(link);
        historyList.appendChild(item);
      }
    }
  </script>
</body>
</html>

在上面的 HTML 代码中，loadHistory 函数用于从 Cookies 中读取保存的浏览历史列表，并将其展示在页面上。其中 getHistory 函数和前面的代码相同。

4. 示例说明

下面是两个示例说明，帮助您更好地理解如何使用 Cookies 保存网站浏览历史。

示例一

假设有一个博客网站，当用户访问博客的文章页面时，需要将文章的 URL 添加到浏览历史中，并在网站的侧边栏中展示浏览历史列表。

为了实现这个需求，我们可以在博客网站的文章页面中添加以下 JavaScript 代码：

// 添加当前文章的 URL 到浏览历史中
addHistory();

并在网站的侧边栏中添加一个 HTML 元素，用于展示浏览历史。例如：

<div id="sidebar">
    <h2>浏览历史</h2>
    <ul id="history"></ul>
</div>

在侧边栏内部，我们可以加载之前提到的那个展示浏览历史列表的 JavaScript 代码，对应的 HTML 代码就是：

<!-- 加载保存在 Cookies 中的浏览历史列表 -->
<script>
    loadHistory();
</script>

示例二

假如我们需要在网站上记录用户访问的每个页面，包括用户的来源、访问时间和访问时长，在用户关闭浏览器后依然能够保存。

我们可以使用以上提到的实现思路，实现一个更加复杂的浏览器历史。即，在记录页面 URL 时，同时将用户的来源、访问时间和访问时长加入到保存在 Cookies 中的浏览记录中。

function recordHistory() {
  var history = getHistory();
  var url = location.pathname;
  var referer = document.referrer;
  var timestamp = Date.now().toString();
  var duration = "0";

  if (history.length > 0) {
    duration = (Date.now() - history[history.length - 1].timestamp).toString();
  }

  var record = {"url": url, "referer": referer, "timestamp": timestamp, "duration": duration};

  if (history.length >= 10) {
    history.shift();
  }
  history.push(record);
  setCookie("history", JSON.stringify(history), 30 * 24 * 60 * 60);

  return record;
}

上述代码中，函数 recordHistory 在记录页面URL、用户来源等同时，还保存了页面打开至关闭的访问时间、访问时长等信息。修改的就是保存在 Cookie 中的浏览历史内容格式，并使用对应的 JavaScript 函数解析并展示在页面上。

这两个示例都能满足不同需求的浏览历史功能，具体实现方式会因需求差异而异，但是大概思路是相同的，即通过 JavaScript，将浏览历史保存在 Cookie 或者 LocalStorage 中，再通过 JavaScript 将浏览历史信息加载到页面上展示。