how to implement back and forward functionality like browser

Question

I want to implement functionality like back and forward in my project same as browser , like web page we have the screen. what i tried is intially m setting the currentscreenindex=-1

and when data of first screen comes execute this function

In screen data arrive function (){
   this.currentscreenindex++; 
   this.screenvisited[this.currentscreenindex]=data;

}

Here is my back function what i tried :

back(){
    currentscreenindex--;
    var screen=screenvisited[currentscreenindex];
    // will go to this screen
}

but what my problem is in these is :

                    currentscreenindex  screen data in screenvisted array
When 1st screen arrived     0     Data of 1st screen 
When 2st screen arrived     1     Data of 2st screen 
When 3st screen arrived     2     Data of 3st screen 
When 4st screen arrived     3     Data of 4st screen 
When 5st screen arrived     4     Data of 5st screen 
when user click back button 3     call the screen is set to 4th gib,

so when data of 4th screen arrive , the current index will get incremented so currentindex=4 and data at current index 4 will be of 4th screen , i think it is not correct , because if data at currentindex=4 will get changed then i can't do forward , if yes pls tell how can i correct it ?

please suggest how can i write the proper back and forward function to do same functionality as browser .

If this is a javascript app, could you use the URL hash and html5 history to add states to the browser's history, then use the JS history manipulation commands to go forward and back? If not, you may want to clarify your purpose. — Wylie, Jul 29 '11 at 06:51

score 22 · Accepted Answer · edited Mar 27 '14 at 15:33

I don't know how you'd fit this into how you're currently doing it, but you can achieve the functionality like this:

You have two stacks. A back stack and a next stack. They both start out being empty. When the user navigates to a new page through a link or some other method of navigation besides back/forward, clear the next stack, add the current page to the back stack, and continue navigation. When the user clicks back, push the current page onto the forward stack, pop a page from the back stack, and navigate to the popped page. When the user clicks forward, push the current page onto the back stack, pop a page from the forward stack, and navigate to the popped page.

Edit: You asked for some pseudocode, so here you go:

var currentPage=null;
var backStack=[];
var forwardStack=[];
function navigate(newPage) {
    currentPage=newPage;
    // stub
}
function linkClicked(page) {
    backStack.push(currentPage);
    forwardStack=[];
    navigate(page);
}
function goBack() {
    forwardStack.push(currentPage);
    navigate(backStack.pop());
}
function goForward() {
    backStack.push(currentPage);
    navigate(forwardStack.pop());
}

Good response. Can be extended by adding button enabling/disabling. Try adding this code within navigate function. if (backStack.count == 0) backButton.Enabled = false; else backButton.Enabled = true; if (forwardStack.count == 0) forwardButton.Enabled = false; else forwardButton.Enabled = true; — Baz Guvenkaya, Mar 23 '16 at 06:11

unkulunkulu · Answer 2 · 2011-07-29T07:07:38.010

0

You should have two numbers: lastScreenInHistory, currentScreen.

Initialize both to -1.
On new screen arrival:
lastScreenInHistory = ++currentScreen; this.screenvisited[this.lastScreenInHistory]=data;
On Back: if( currentScreen > 0 ) --currentScreen;
On Forward: if( currentScreen < lastScreenInHistory ) ++currentScreen;
Respective buttons should be enabled iff the corresponding if statement expressions are true.

After both Back and Forward you should load the screen from screenvisited at index currentScreen.

edited Jul 29 '11 at 07:07

answered Jul 29 '11 at 06:52

unkulunkulu

11,576
2
31
49

when i go back after currentindex 4 , then data of index 4 is the same as data of index 3 , i think it is not correct , so how i can do forward at this time the forward data is not present ? – XMen Jul 29 '11 at 07:20
I don't get why the data is the same. You can make copies of old data if need to go back. – unkulunkulu Jul 29 '11 at 07:58

score 0 · Answer 3 · answered Jul 29 '11 at 06:53

How about this simple solution:

back(){
    currentscreenindex-=2;
    var screen=screenvisited[currentscreenindex+1];
    // will go to this screen
}

Then, when the 'screen' gets loaded, it will increment currentscreenindex by 1, resulting in currentscreenindex - 2 + 1 - exactly what you need.

how to implement back and forward functionality like browser

3 Answers3

Linked