当前位置：首页 > 行业动态 > 正文

Cookie是如何记录我们浏览过的JavaScript代码的？

admin
行业动态
2025-01-16
4533

当然，以下是一段关于如何使用 JavaScript 记录用户浏览过的页面的代码示例：，，“ javascript，document.addEventListener('DOMContentLoaded', (event) => {， // 获取当前页面的 URL， let currentPage = window.location.href;，， // 检查是否已有 cookie， let cookies = document.cookie.split(';');， let visitedPages = [];， cookies.forEach(cookie => {， if (cookie.trim().startsWith('visited=')) {， visitedPages = JSON.parse(decodeURIComponent(cookie.trim().substring(8)));， }， });，， // 如果当前页面未被记录，则添加， if (!visitedPages.includes(currentPage)) {， visitedPages.push(currentPage);， document.cookie = visited=${encodeURIComponent(JSON.stringify(visitedPages))}; path=/ ;， }，});，“

在当今的数字时代，Cookie已成为互联网浏览不可或缺的一部分，它们不仅帮助网站记住用户的偏好设置，还用于跟踪用户的在线行为，以便提供更加个性化的体验，特别是对于JavaScript（JS）开发者而言，理解如何利用Cookie记录用户访问过的页面至关重要，本文将深入探讨如何使用Cookie来追踪用户浏览过的JS页面，并提供实用的代码示例、表格以及常见问题解答。

Cookie是如何记录我们浏览过的JavaScript代码的？第1张

一、Cookie基础

1. Cookie的定义与作用

Cookie是一小段数据，由Web服务器发送到用户的浏览器，并存储在本地计算机上，每次用户访问同一域名下的网页时，浏览器都会自动将这些Cookie信息回传给服务器，这使得网站能够识别用户身份，记住用户的偏好或购物车中的商品等。

2. Cookie的类型

会话Cookie：临时性的，仅在浏览器会话期间有效，关闭浏览器后即被删除。

持久性Cookie：具有特定的过期时间，即使浏览器关闭也会保留，直到达到设定的有效期。

第一方Cookie：由用户直接访问的网站设置。

第三方Cookie：由用户所访问网站之外的其他网站设置，常用于广告跟踪和跨站请求伪造（CSRF）防护。

二、使用Cookie记录浏览过的JS页面

要记录用户访问过的JS页面，可以通过设置和读取Cookie来实现，下面是一个基本的实现思路：

1、设置Cookie：当用户访问某个包含JS的页面时，检查是否已存在记录该页面访问的Cookie，如果不存在，则创建一个新的Cookie，并将其值设置为当前页面的URL或一个唯一标识符。

2、读取Cookie：在页面加载时，读取存储访问记录的Cookie，并根据其内容动态显示用户之前访问过的页面列表。

3、更新Cookie：每次用户访问新页面时，更新Cookie以包含新的访问记录。

示例代码

以下是一个简单的JavaScript示例，演示如何设置和读取Cookie来记录用户访问过的页面：

// 设置Cookie函数
function setCookie(name, value, days) {
    let expires = "";
    if (days) {
        const date = new Date();
        date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
        expires = "; expires=" + date.toUTCString();
    }
    document.cookie = name + "=" + (value || "") + expires + "; path=/";
}
// 获取Cookie函数
function getCookie(name) {
    const nameEQ = name + "=";
    const ca = document.cookie.split(';');
    for(let i=0;i < ca.length;i++) {
        let c = ca[i];
        while (c.charAt(0)==' ') c = c.substring(1,c.length);
        if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
    }
    return null;
}
// 删除Cookie函数
function eraseCookie(name) {   
    document.cookie = name+'=; Max-Age=-99999999;';  
}
// 初始化页面访问记录数组
const pageHistory = JSON.parse(getCookie("pageHistory")) || [];
// 添加当前页面到历史记录
if (!pageHistory.includes(window.location.href)) {
    pageHistory.push(window.location.href);
    setCookie("pageHistory", JSON.stringify(pageHistory), 365); // 保存一年
}
// 显示访问历史
console.log("您访问过的页面: ", pageHistory);

表格展示访问历史

为了更直观地展示用户的访问历史，我们可以将上述数组转换为表格形式：