History API

Definition

The History API lets a page change the address bar without a navigation and be told when the browser moves back and forth through the entries it created. One call writes an entry, another replaces it, and a popstate event reports the movement. It's what makes a filtered, sorted or swapped view a link a shopper can send to someone.

Documented at MDN, the History API.

How We've Used It

Our rule is that the URL is the state and everything else is a cache. A facet or sort change writes the address, and the filter code re-reads it on popstate, so going back returns the previous result set instead of the top of the catalog. On a shade-led product page the chosen variant is in the URL too, which is what lets the canonical link, the title and the social tags describe the shade a person was actually sent. And once a redirect parameter has been consumed, such as a sign-in that fires an analytics event, we strip it from the address so a refresh can't fire it again.

Builds Using It

2 gated builds use it; their pages follow.

Related Entities

• Custom elements — the components that read and write that state.
• Liquid pagination — the server-rendered ladder underneath.
• localStorage — state that shouldn't be in the URL.
• Filters and faceted navigation — the capability this keeps shareable.