js 获取前一次访问的url

在JavaScript中，获取前一次访问的URL可以通过多种方式实现，但需要注意的是，浏览器出于隐私保护的考虑，不会直接提供一个API来获取完整的浏览历史记录。不过，我们可以通过一些技巧来获取前一次访问的URL。

基础概念

• URL: 统一资源定位符，用于标识互联网上的资源。
• History API: 浏览器提供的API，允许开发者操作浏览器的历史记录。

相关优势

• 用户体验: 了解用户从哪里来可以帮助提供更个性化的体验。
• 数据分析: 对于网站运营者来说，分析用户来源有助于优化网站内容和营销策略。

类型与应用场景

• 直接访问: 用户直接输入URL访问网站。
• 搜索引擎: 用户通过搜索引擎找到网站。
• 社交媒体: 用户通过社交媒体链接访问网站。
• 推荐链接: 用户通过朋友分享的链接访问网站。

实现方法

方法一：使用document.referrer

document.referrer属性可以返回加载当前文档的上一页面的URL。这是最简单的方法，但需要注意的是，如果用户直接打开新标签页或者使用书签访问，则referrer可能为空。

console.log(document.referrer);

方法二：使用Session Storage

可以在用户访问页面时，将当前URL存储到Session Storage中，这样在下一次访问时就可以读取出来。

// 在页面加载时存储当前URL
window.onload = function() {
    sessionStorage.setItem('previousUrl', document.referrer);
};

// 在需要的时候读取前一次的URL
var previousUrl = sessionStorage.getItem('previousUrl');
console.log(previousUrl);

方法三：使用History API

通过监听popstate事件，可以在用户导航时获取前一个页面的URL。

window.addEventListener('popstate', function(event) {
    console.log('前一个页面的URL:', event.state.url);
});

// 在页面加载时设置初始状态
window.onload = function() {
    history.replaceState({url: document.referrer}, '');
};

可能遇到的问题及解决方法

问题1: document.referrer为空

• 原因: 用户可能是直接打开的新标签页或使用书签。
• 解决方法: 结合Session Storage或History API来记录和获取URL。

问题2: 浏览器隐私设置阻止获取referrer

• 原因: 某些浏览器或插件可能会阻止referrer信息的传递。
• 解决方法: 提供备用方案，比如提示用户手动输入或使用其他方式记录访问来源。

示例代码

以下是一个结合Session Storage和document.referrer的完整示例：

// 在页面加载时存储当前URL
window.onload = function() {
    var currentUrl = window.location.href;
    var previousUrl = document.referrer || sessionStorage.getItem('previousUrl');
    sessionStorage.setItem('previousUrl', previousUrl);
    console.log('当前页面的URL:', currentUrl);
    console.log('前一次访问的URL:', previousUrl);
};

通过上述方法，可以在大多数情况下有效地获取前一次访问的URL。