JSFiddle - React, Tailwind, and code Playground

by fkling

HTML

<button id="add">Add history</button>
<button id="back">Go back</button>
<div id="location"></div>
<div id="msg"></div>
<div id="stack"></div>

JavaScript

var i = 0;

window.onpopstate = function(e) {
    i++;
    $('#location').text(window.location.href);
    $('#msg').text('History changed ' + i  + ' times (State object: ' + JSON.stringify(e.state) + ')');
};

$('#add').click(function() {
    window.history.pushState({foo: 'bar'}, "page 2", "bar.html");
    $('#stack').text('History stack size: ' + window.history.length);
});

$('#back').click(function() {
    window.history.back();
});

$('#location').text(window.location.href);