Style visited links with localStorage

index.html

<div class="wrap">
  <h1>Style visited links with localStorage</h1>
  <h2>Why?</h2>
  <p>
    Since browsers allow only very basic CSS on <code>:visited</code> I created this way to check a user has clicked a link. If he clicks on any link, that has the class <code>.trackVisit</code> the complete href is saved in an array in localStorage.
    On each page visit and click on a link the script adds the class <code>.visited</code> so we can style it however we want.
  </p>
  <h2>Demo Links: Repo services</h2>
  <p>
    The links have <code>e.preventDefault();</code> - so you can click them hassle free ;)
  </p>
  <ul>
    <li><a class="trackVisit" target="_blank" href="https://github.com">GitHub</a></li>
    <li><a class="trackVisit" target="_blank" href="https://gitlab.com/explore">GitLab</a></li>
    <li><a class="trackVisit" target="_blank" href="https://www.codeplex.com/">CodePlex</a></li>
    <li><a class="trackVisit" target="_blank" href="https://bitbucket.org/">Bitbucket</a></li>
  </ul>
  <button>Reset</button>
</div>

script.js

// helper function
var forEach = function(array, callback, scope) {
  for (var i = 0; i < array.length; i++) {
    callback.call(scope, i, array[i]);
  }
};

if (localStorage.getItem('visitedLinks') === null) {
  localStorage.setItem('visitedLinks', JSON.stringify([]));
}

// get already visited links
function getVisitedLinks() {
  return JSON.parse(localStorage.getItem('visitedLinks'));
}

// save visits
forEach(document.querySelectorAll('a.trackVisit'), function(index, element) {
  element.addEventListener('click', function saveVisit(e) {
    var visitedLinks = getVisitedLinks();
    e.preventDefault();
    if (visitedLinks.indexOf(element.getAttribute('href')) === -1) {
      visitedLinks.push(element.getAttribute('href'));
    }
    localStorage.setItem('visitedLinks', JSON.stringify(visitedLinks));
    refreshVisits(visitedLinks);
  });
});

// style the links
function refreshVisits(visitedLinks) {

  forEach(document.querySelectorAll('a'), function(index, link) {
    link.classList.remove('visited');
  });

  visitedLinks.forEach(function(el, key) {
    if (document.querySelector('a[href="' + el + '"]') !== null) {
      document.querySelector('a[href="' + el + '"]').classList.add('visited');
    }
    console.log(localStorage.getItem('visitedLinks')); // for debug
  });

}

// run it!
refreshVisits(getVisitedLinks());

// reset visits button
document.querySelector('button').addEventListener('click', function() {
  localStorage.setItem('visitedLinks', JSON.stringify([]));
  refreshVisits(getVisitedLinks());
});

style-visited-links-with-localstorage.markdown

Style visited links with localStorage

Since :visited will not accept better styles anymore - this is kinda fallback

A Pen by Gabriel on CodePen.

License.

style.css

body {
  background: #6ca;
  font-family: 'Raleway', sans-serif;
}

p {
  line-height: 1.5;
  text-align: justify;
}

code {
  background: #eee;
  padding: 2px 5px;
  border-radius: 3px;
  border: 1px solid #ccc;
}

h1,h2 {
  font-family: 'Old Standard TT', serif;
}

.wrap {
  background: #fff;
  height: 600px;
  width: 100%;
  overflow-y: scroll;
  max-width: 600px;
  margin: 90px auto 0;
  padding: 1px 20px;
  border-radius: 4px;
  box-shadow: 0 3px 8px rgba(22,22,22,.3);
}


ul, li {
  list-style: square;
}

a {
  color: #000;
}

a.visited {
  position: relative;
  color: #ccc;
  text-decoration: line-through;
  padding-left: 15px;
}
a.visited:before {
  content: "\2713 ";
  position: absolute;
  left: 0;
  top: -2px;
}

styles

<link href="https://fonts.googleapis.com/css?family=Old+Standard+TT|Raleway:300" rel="stylesheet" />