History example

by Jan Föh

HTML

<div class="red"></div>
<div class="green"></div>
<div class="blue"></div>

<p>You have selected <span>no color</span></p>

SCSS

div {
    display: inline-block;
    width: 75px;
    height: 75px;
    cursor: pointer;
    &.red {
        background-color: red;
    }
    &.green {
        background-color: green;
    }
    &.blue {
        background-color: blue;
    }
}

JavaScript

window.selectedColor = "";

function selectColor(color) {    
    window.selectedColor = color;
    $('p span').text(color);
};

function doPushState(color) {
    var state = { selectedColor: color },
        title = "Page title",
        path  = "/" + color;
    
    history.pushState(state, title, path);
};

$('div').on('click', function() {
    var color = $(this).attr('class');
    
    selectColor(color);
    doPushState(color);
});

$(window).on('popstate', function(event) {
    var state = event.originalEvent.state;
    
    if (state) {
        selectColor( state.selectedColor );
    }
});