Nile-Commerce Version 2.0.0 is out.🥇
It comes with more features and tools, and in a new look.
Build your E-Commerce website with Nile-Commerce
It is built with JavaScript and NodeJs
It comes with free hosting for the first year
Get it now from Nilewebspace today

 

To develop a beautiful non-full-page loading web application, like ajax or fetch API based applications, you need JavaScript history API.

JavaScript history API provides you methods and properties that enable you to move back and forward in the history stack of the user’s browser, and allow you to manipulate history entry.

 

Methods:

 

The Object provides three methods that that enable you to move through the history stack:

 

  1. window.history.forward() or simply history.forward() – This method enables you to move forward in the stack.  It mimics the behavior when the user clicks on the forward button of the toolbar.
  2. window.history.back() or simply history.back() – This mimics the behavior when the user clicks on the back button of the toolbar.  It enables you to move back in the stack.
  3. window.history.go() or simply history.go() – This method enables you to move to a specific point in the history stack.  You can call it with a number as an argument, and it will to that position in the stack.

For example, to use window.history.go() to go to back, you call the method with -1 as window.history.go(-1). This will take you to the previous page. 

Similarly, to move to next page, you pass 1 to the  method as window.history.go(1). To move two pages back or two page forward, you use window.history.go(-2) or window.history.go(2) respectively.

 

You can also just refresh the current page by calling this method with 0 as an argument like window.history.go(0), or call it with no argument like window.history.go().

 

The history Object also provides a length property that returns the number of pages in the history stack. 

 

let historyEntries = window.history.length

 

 

Manipulating Session History

 

The history Object provides two more methods to manipulate the history stack.  The history.pushState and history.replaceState methods add entry and replace the current entry in the history stack respectively.

 

 

ThepushState method

 

The pushState method of the History API add an entry to the history stack.

 

Syntax

history.pushState(state,unused[,url]);

 

Parameters

 

state

 

The defines ‘state’ as it’s first parameter.  The state parameter is a Javascript Object.  And whenever the user navigates through the history stack, that is, to a new state, the popstate event is fired with the event’s state property containing a copy of state.

 

unused

 

To be on a safe side, it is recommended to leave this an empty string.  Only Safari browser uses it a title, but it might change in future.

 

url

 

The url parameter is optional.  If provided, browser changes the current url to the one provided, else, the current one is retained.

Please note browser do not load this url when pushState method is called.  It only adds it to history stack, and reflected in the browser address bar.

 

Read more about pushState at https://developer.mozilla.org/en-US/docs/Web/API/History/pushState

 

ThereplaceState method

 

If you want to modify the state or url of the current history entry, use replaceState method.  The method replaces the current state and url with the ones provided in this method.

 

Syntax

history.replaceState(state,unused[,url]);

 

Parameters

 

state

 

The state associated with the current entry.

 

unused

 

To be on a safe side, it is recommended to leave this an empty string.  Only Safari browser uses it a title, but it might change in future.

 

url

 

The url of the history entry.

 

Read more about replaceState at https://developer.mozilla.org/en-US/docs/Web/API/History/replaceState

 

Thepopstate event

 

This is an event fired on window Object whenever the user navigates through the history stack.  It is triggered whenever the user clicks on back or forward buttons, or when using window.history.back()/window.history.forward() methods.  This event has a state property which holds a copy of the current history entry state.

 

The event handled by listening on window Object using window’s onpopstate property or using addEventListener method.

 

window.onpopstate = (evt)=>{
//...
};

 

Window.addEventListener('popstate', (evt)=> {
//...
});

 

The popstate event is not fired when pushState or replaceState methods are called.

Read more about popstate event at https://developer.mozilla.org/en-US/docs/Web/API/Window/popstate_event

 

Thestate property

 

You can also access the state of the current entry via the history state property.

let stateData = History.state;

 

The scrollRestoration property

 

The history API also enables you to set whether the user’s scroll position should be restored or not.  This can take one of the two values, auto – if user’s scroll position should be restored or manual – to disallow restoration.

 

Conclusion

With growing demand of web applications that mimic desktop and mobile application, this history API is a great tool for a developer to manipulate application’s content based on changes in the history stack.  It allows to store data(state) that you can retrieve to manipulate the application’s content.  If used well, you can create application that mimics a desktop application.

 

To read more about this API go to https://developer.mozilla.org/en-US/docs/Web/API/History for details and browser support.

 

 

 

Latest Articles

Great Articles About Information Technologies Around the World.

  • 0
  • 0
Error!

Are you sure?