HTML and CSS Reference
In-Depth Information
chapter 6
n n n
Using History API and
Custom Data Attributes
Whenever you navigate between various pages of your web application, the browser maintains a history of
the pages you visited. You can navigate through the history using the browser's back and forward buttons.
The same history is accessible to the JavaScript code through the
History
object. Although the
History
object isn't a new addition in HTML5, there are some enhancements to it that are worth knowing about.
Especially in Ajax-driven applications, the new History API can prove to be very useful. An Ajax-driven
application often changes the web page content without generating unique URLs for each different piece
of content rendered in the page. This not only causes mismatches between the bookmarked URLs and the
actual content but also makes content difficult for search engines to track. The History API provides a
small object model as compared to other HTML5 APIs, but the functionality offered is often desirable
when web applications need to synchronize the URL shown in the browser address bar and the page
content.
After discussing the problems with traditional history management and how HTML5 addresses them,
the chapter moves on to discuss another useful topic: custom data attributes, or
data-*
attributes. The
standard HTML attributes are predefined by the HTML specifications and normally affect the behavior or
appearance of an element in some way. The custom data attributes are developer-defined attributes that
can be used to store metadata information about an element. This information can then be accessed using
the client-side script.
The key topics discussed in this chapter include the following:
• The
History
object and HTML5 enhancements to it
• Scenarios when traditional history tracking can be problematic
• Using the HTML5 History API to add history entries
• Deining custom data attributes (
data-*
) on HTML elements
• Accessing custom data attributes using plain JavaScript and jQuery
The History Object
Whenever you navigate through pages of a web application, the browser tracks your visits in the form of
the
History
object. You can access the
History
object via the
history
property of the DOM window object.
In HTML 4.01 the
History
object has just one property and three methods, described in Table 6-1.
