fightbulc/page-a.html

## page-a.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>PAGE A</title>
</head>
<body>
<h1>PAGE A</h1>

<a href="page-b.html">Go to page B</a>
<hr>
<a href="" id="reset-tracking">RESET TRACKING</a>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="tracking.js"></script>

<script>
    document.addEventListener('DOMContentLoaded', function (e)
    {
        console.log('DOM loaded...', document.title);

        var int = setInterval(function ()
        {
            var cache = getCache();

            if (cache.indexOf('PAGE B') !== -1)
            {
                console.log('client has been way ahead...');

                $.get('./remote.json', function (response)
                        {
                            console.log('REMOTE REQUESTED JSON', response);
                        }
                );

                resetCache();
                clearInterval(int);
            }
        }, 100);

        document.querySelector('#reset-tracking').addEventListener('click', function (e)
        {
            e.preventDefault();
            resetCache();
            console.log('current tracked...', getCache());
        });
    });
</script>
</body>
</html>

## page-b.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>PAGE B</title>
</head>
<body>
<h1>PAGE B</h1>

<a href="page-a.html">Go to page A</a>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="tracking.js"></script>

<script>
    document.addEventListener('DOMContentLoaded', function (e)
    {
        console.log('DOM loaded...', document.title);
        console.log('current tracked...', getCache());
        setCache(document.title);
    });
</script>
</body>
</html>

## remote.json
{
  "foo": "bar"
}

## tracking.js
function getCache()
{
    var tracked = window.localStorage.getItem('visited');

    if (!tracked)
    {
        tracked = [];
    }
    else
    {
        tracked = JSON.parse(tracked);
    }

    return tracked;
}

// ----------------------------------------------

function setCache(id)
{
    var tracked = getCache();

    tracked.push(id);

    window.localStorage.setItem('visited', JSON.stringify(tracked));
}

// ----------------------------------------------

function resetCache()
{
    window.localStorage.removeItem('visited');
}
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>PAGE A</title>
	</head>
	<body>
	<h1>PAGE A</h1>

	<a href="page-b.html">Go to page B</a>
	<hr>
	<a href="" id="reset-tracking">RESET TRACKING</a>

	<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
	<script src="tracking.js"></script>

	<script>
	document.addEventListener('DOMContentLoaded', function (e)
	{
	console.log('DOM loaded...', document.title);

	var int = setInterval(function ()
	{
	var cache = getCache();

	if (cache.indexOf('PAGE B') !== -1)
	{
	console.log('client has been way ahead...');

	$.get('./remote.json', function (response)
	{
	console.log('REMOTE REQUESTED JSON', response);
	}
	);

	resetCache();
	clearInterval(int);
	}
	}, 100);

	document.querySelector('#reset-tracking').addEventListener('click', function (e)
	{
	e.preventDefault();
	resetCache();
	console.log('current tracked...', getCache());
	});
	});
	</script>
	</body>
	</html>
	function getCache()
	{
	var tracked = window.localStorage.getItem('visited');

	if (!tracked)
	{
	tracked = [];
	}
	else
	{
	tracked = JSON.parse(tracked);
	}

	return tracked;
	}

	// ----------------------------------------------

	function setCache(id)
	{
	var tracked = getCache();

	tracked.push(id);

	window.localStorage.setItem('visited', JSON.stringify(tracked));
	}

	// ----------------------------------------------

	function resetCache()
	{
	window.localStorage.removeItem('visited');
	}