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 .

Answer 1

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());
}

Answer 2

You should have two numbers: lastScreenInHistory , currentScreen .

1. Initialize both to -1.

2. On new screen arrival:
   lastScreenInHistory = ++currentScreen; this.screenvisited[this.lastScreenInHistory]=data;

3. On Back: if( currentScreen > 0 ) --currentScreen;

4. On Forward: if( currentScreen < lastScreenInHistory ) ++currentScreen;

5. 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 .

Answer 3

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.