Detect forward or backward on popstate - ajax

Question

I'm using ajax to load new post pages into the content section of my site and using pushstate to edit the url each time. I'm looking for a way to move when the forward and back buttons are clicked on the browser.
My thinking was to create an array of post id's adding one to the list every time I move forward
$(document).on("click", ".title[data-ajax='post']", function() {
$post_id = $(this).data("id");
$post_type = $(this).data("type");
$post_url = $(this).data("url");
var historyData = $(".wrapper").attr("data-history");
if (!historyData){
historyData = [];
}
else{
historyData = JSON.parse(historyData);
}
historyData.push({
id: $post_id,
type: $post_type,
url: $post_url
});
var data = {
action : 'new_ajax_'+ $post_type +'_template',
post_id : $post_id
};
$("#main").empty().hide();
$.ajax({
url : ajax_object.ajax_url,
type : 'post',
data : data,
success: function(html) {
$("#main").append(html);
history.pushState('data', '', $post_url);
$(".wrapper").attr("data-id", $post_id);
$(".wrapper").attr("data-history", JSON.stringify(historyData));
$("#main").fadeIn("fast");
}
});
});
But instead of this I want to create two seperate arrays for forward and back id's so when back is triggered, I can snag the last post id in the "back" array to get the content I need.
My question is how to detect forward or backward on popstate to achieve this or a better way in general to implement this.
$(window).on('popstate', function(event) {
<---detect direction---->
});