How to track back and forward capability using history push state

track_back_and_forward_push_state.js

/*

This is an example of how one could track if going back or forward is 
an option for the user.

*/

if (!window.history.state || !window.history.state.visitedAt){
  window.history.replaceState(
    {...history.state, visitedAt: Date.now()},
    window.document.title,
    window.location,
  )
}

function trackBackAndForwardState(){
  let oldestVisitedAt = (
    ('oldestVisitedAt' in window.sessionStorage) &&
    parseInt(window.sessionStorage.oldestVisitedAt, 10)
  )
  let latestVisitedAt = (
    ('latestVisitedAt' in window.sessionStorage) &&
    parseInt(window.sessionStorage.latestVisitedAt, 10)
  )

  const visitedAt = window.history.state && window.history.state.visitedAt
  if (!visitedAt){
    console.warn('visitedAt is missing')
    return {canGoForward: true, canGoBack: true}
  }

  if (!latestVisitedAt || visitedAt >= latestVisitedAt)
    window.sessionStorage.latestVisitedAt = latestVisitedAt = visitedAt

  if (!oldestVisitedAt)
    window.sessionStorage.oldestVisitedAt = oldestVisitedAt = visitedAt

  return {
    canGoForward: visitedAt < latestVisitedAt,
    canGoBack: window.history.length > 1 && visitedAt > oldestVisitedAt,
  }
}