Mobile Web Wearable Web

HTML5 session history of browsing contexts: Managing Browsing Contexts

This tutorial demonstrates how you can store and use session history details.

Warm-up

Become familiar with the HTML5 session history of browsing contexts API basics by learning about:

Managing Session History Entries

Learning how to manage the session history enhances the user browsing experience in your application:

  1. To add an entry to the session history, use the pushState() method of the history interface:
    <script>
       history.pushState({index: currentIndex}, document.title);
    </script>
    
    Note
    The pushState() method accepts the data, title, and url (optional) parameters. The title parameter refers to the key value used to search for entries saved in the session history, and is currently ignored in all browsers.
  2. To update the entry details, use the replaceState() method:
    <script>
       history.replaceState({index: currentIndex}, document.title, '#page' + currentIndex);
    </script>
    

    The replaceState() method uses the same parameters as the pushState() method. The history_sample.html is the url parameter, which refers to the address of the page that is to be changed.

  3. To use the session history information:
    1. Implement a page with the Prev and Next buttons:
      <nav class="paging">
         <a href="#">Prev</a>
         <a href="#">Next</a>
      </nav>
      <p>Current Index: <output> </output></p>
      
      <a href="http://tizen.org/">Tizen.org</a>
      
    2. When the user clicks the buttons, the current index value (representing page numbers) is changed and stored in the state object of the history interface:
      var currentIndex = 0;
      var prev = document.querySelector('.paging > a:nth-child(1)');
      var next = document.querySelector('.paging > a:nth-child(2)');
      
      /* Prev button click event */ 
      prev.onclick = function() 
      {
         currentIndex -= 1;   
         setState(currentIndex);
          
         return false;
      };
          
      /* Next button click event */ 
      next.onclick = function() 
      {
         currentIndex += 1;  
         setState(currentIndex);
          
         return false;
      };
      
    3. If the state object has data in it, use the replaceState() method to change the previously stored information. Otherwise, add new info with the pushState() method.
      function setState(currentIndex) 
      {
         if (history.state) 
         {
            history.replaceState({index: currentIndex}, document.title, '#page' + currentIndex);
         } 
         else 
         {
            history.pushState({index: currentIndex}, document.title);
         }
         output.textContent = currentIndex;
      }
      

Source Code

For the complete source code related to this use case, see the following file:

Detecting Session History Changes

Learning how to track session history changes enhances the user browsing experience in your application:

  1. A page with data stored in the session history fires a popstate event when the page is loaded (for example, because it is refreshed or moved to from the previous page).

    Register the event listener:

    window.addEventListener("popstate", foo, false);
    
  2. Define the event handler for the event. You can use the data stored in the state object to retrieve the correct location on the page to be loaded.
    var output = document.querySelector('output');
    
    window.onpopstate = function() 
    {
       currentIndex = history.state.index;
       output.textContent = currentIndex;
    }
    

    In the snippet above, when a popstate event is fired, it saves the index value stored in the state object to the currentIndex variable, and outputs the <output> element from the correct index location.

Source Code

For the complete source code related to this use case, see the following file:

Go to top