javascript - 如何实现像浏览器一样的后退和前进功能

Question

我想在我的项目中实现像浏览器一样的后退和前进功能，比如我们有屏幕的网页。我试过的是最初 m 设置 currentscreenindex=-1

当第一个屏幕的数据到来时执行这个函数

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

}

这是我尝试过的后退功能:

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

但我的问题在于:

                    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, 

所以当第 4 个屏幕的数据到达时，当前索引将增加，所以 currentindex=4 并且当前索引 4 处的数据将是第 4 个屏幕，我认为这是不正确的，因为如果数据在 currentindex=4 将被更改然后我不能做转发，如果是请告诉我如何更正它？

请建议我如何编写正确的后退和前进功能来实现与浏览器相同的功能。

Answer 1

我不知道你如何将它融入你目前的工作方式，但你可以实现这样的功能:

你有两个堆栈。返回堆栈和下一个堆栈。他们都开始是空的。当用户通过链接或除后退/前进之外的其他导航方法导航到新页面时，清除下一个堆栈，将当前页面添加到后退堆栈，然后继续导航。当用户单击后退时，将当前页面压入前向堆栈，从后退堆栈弹出一个页面，然后导航到弹出的页面。当用户点击前进时，将当前页面压入后退栈，从前进栈中弹出一个页面，并导航到弹出的页面。

编辑:你要求一些伪代码，所以你去:

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