Manipulating the browser history

History API allows you to manipulate the browser history using JavaScript. Some of the manipulations were available in the user agents for a long time. A new feature is an option to add new entries in the history, change the URL show in the location bar, and so on.

This means that we can create a single page app that will respect the REST way. The pages now can have unique identifier that will lead directly to certain view with specific state without doing page reloads or some client-side hacks.

Getting ready

In this recipe, we will use few images, so you can pick your own selection or use the ones provided in the example files located under the img/ folder. The images will also be served in img/ for our web page, so you should have the HTTP server running.

How to do it...

Let's get started:

1. We create the HTML code for a cat viewer:

   <div>
   <nav>
   <ul>
   <li><div data-id="0" data-url="/mycat.html">A cat</div></li>
   <li>...