Javascript/jQuery 如何判断页面已被访问过？

Question

一个奇葩的需求！

因为是个人脚本需求，发问前未考虑到“隐私”问题。
感谢 unofficial 与 rainyjune 的详细解答。

关于 visited 隐私问题的相关解释：https://developer.mozilla.org...

---

补充说明2：其实只是想找一个确定“页面”或“超链接”的“已访问”状态，而不借助任何的存储！

---

如何在不读写LocalStorage、IndexedDB、Cookie之类的情况下，如何判断一个网页在打开时是已被访问过？

或如何得知一个超链接的已访问状态？

补充说明：我并不是要设置其CSS样式！

---

补充说明2：

Answer 1

仔细了解了提问者的需求，你这样做会侵犯用户隐私。

当前主流浏览器不允许用 JavaScript 判断页面中的链接是否已被访问，主要是用户安全和隐私方面的考虑。CSS2 官方文档中说：

Note. It is possible for style sheet authors to abuse the :link and :visited pseudo-classes to determine which sites a user has visited without the user's consent.

了解更多： https://developer.mozilla.org...

Answer 2

以前写过一个方法，可以参见：如何判断用户是否访问过某个网址。

基本原理是浏览器在渲染访问过的链接时，样式会有所不同，可以检测渲染时间差，从而得知用户是否访问过指定链接。

Answer 3

这种需求还真没遇见过，不过你提到了用js来处理，给你一个思路，给url添加hash。

---

如果你是要在浏览器地址栏中输入url，然后想知道是否之前就访问过，不记录状态，我想应该是不能实现的，如果有方案，我也可以了解一下。

Answer 4

当然是用localStorage cookie 这些存储机制了， 你要是说不用这些，那不是扯蛋吗。

Answer 5

有点奇怪的需求

这样看看能否符合你的需求，在你的页面中隐藏一个极小的图片，然后JS判断这个图片是否在缓存中，在的话就代表已被访问，不在自然就没有被访问了。

var url = "./a.png";
var img = new Image();
img.src = url;
if(img.complete || img.width) {
    console.log('已经访问过！！！')
}

Answer 6

如果拦截所有的url请求，并获取保存url和访问用户（或ip），如果存在了当前ip对该url的数据，即视为访问过。也许可行。。

Answer 7

如果不借助后端，后端可以记录ip，也不借助前端的任何存储，这是不可能的

你想，访问过或者没有访问过，本质上这是不是一个打标记的问题，不管是打0或1，在判断的时候是不是总得取这个标记值看一下，你不用任何存储，请问这个标记放在哪

Answer 8

利用 a:visited css 访问过的链接样式区分。

<style type="text/css">
.nealnote:link {
  color: blue;
}
.nealnote:visited {
  color: red;
}
.nealnote:hover {
  color: blue;
}
.nealnote:actve {
  color: blue;
}
</style>
<a class="nealnote" href="https://segmentfault.com/q/1010000007544678">https://segmentfault.com/q/1010000007544678</a>
<a class="nealnote" href="https://www.baidu.com/?q=visited">https://www.baidu.com/?q=visited</a>

访问过的链接的color是 red,未访问过的链接color是 blue

Answer 9

这个要求太奇葩了。Cookie和URL加Hash都是比较靠谱的方案，为什么不用？纯靠JS没有服务器帮助是比较困难的。
浏览器主要是用户安全隐私考虑，不允许访问CSS的visited伪类。的确是这样。但是有一个变通的办法。
你可以给对应的visited样式加上特殊颜色（肉眼看不出的细微颜色差别）或者字体大小，行高（一个像素差别啥的）什么的，然后通过js获取其颜色或者父标记的尺寸来确定是不是visited的。