Можно ли определить, переходил ли пользователь по ссылке на своем сайте?

Question

В гугле есть такая тема что после перехода по ссылке на какой то ресурс, в будущем этот ресурс в гугле подсвечивается не синим цветом, а фиолетовым. Сегодня я занимался версткой, и заметил такую тему и на обычных сайтах. Есть ли способ как то определить на стороне джава скрипта этот момент, ну и можно ли на своем сайте кастомизировать просмотренную ссылку за счет css?

Answer 1

Вы можете кастомизировать через css, для этого нужно использовать :visited. Документация.

a:visited {
  color: red;
}

<a href="https://ru.stackoverflow.com/">Stack<a>
<a href="https://google.com/">Google<a>
<a href="https://example.com/">Example<a>

Answer 2

Для теории—в реальности у самой ссылки (anchor элемента) нет состояния "просмотренная". Используемый браузер пометит ссылку "просмотренном" стилем если она направляет на веб-адрес который уже есть в истории браузера.

Исходя из этого, один из способов сделать ссылку "просмотренной" со стороны JS—это добавить её в историю браузера при помощи history API (которого нет в версиях хтмл раньше 5-и).

Сохранить данный веб-адрес в переменной.

let currentUrl = window.location.href;

Используя метод replaceState от объекта history, добавить веб-адрес ссылки, которую желаете пометить "просмотренном" стилем, в историю браузера.

window.history.replaceState({}, '', '<просмотренный веб-адрес>');

Использовать метод replaceState ещё раз, чтобы исправить веб-адрес видимый в адресной строке браузера после первого вызова метода replaceState на действительный веб-адрес просматриваемой страницы (в общем веб-адрес в переменной currentUrl).

window.history.replaceState({}, '', currentUrl);

Стоит подметить что этот способ только работает в рамках правила ограничения домена. В двух словах—веб-адрес в ссылке, которую вы хотите пометить "просмотренном" стилем, может только перенаправлять на хост (с тем же протоколом) на котором будет проводиться эта операция.

Answer 3

Этот пример показывает, как с помощью JS без использования истории можно определить, переходил ли пользователь по ссылке на сайте и кастомизировать их. Для этого добавляем на страницу такой код:

let visitedColor = 'red'; // цвет ссылок, по которым был переход
let all_a = document.querySelectorAll("a");
let v = localStorage.getItem('visited');
for(var i = 0; i < all_a.length; i ++){
    all_a[i].id = i;
    all_a[i].onclick = function(){
        this.style.color = visitedColor;
        localStorage.setItem('visited', v + (v == '' ? '' : ',') + this.id);
    }
}
if(v){
    let allVisited = v.split(',');
    for(var i = 0; i < allVisited.length; i ++){
        all_a[allVisited[i]].style.color = visitedColor;
    }
}

Ссылки, по которым был сделан переход, окрашиваются в цвет, заданный в первой строке.

БЛОГ НА HUSL

Можно ли определить, переходил ли пользователь по ссылке на своем сайте?

Ответы (3 шт):