一、引言

我们浏览网页，会发现“前进”和“后退”是 Web 浏览器的常用功能，实现该功能的一种方式是使用两个栈（backward 栈和forward 栈）来存储用户访问的网址，用户的不同操作对应的具体实现方法如下：

后退（BACK）：如果backward 栈为空，则该命令被忽略。否则，将当前页面压入forward栈，并从backward 栈中弹出一个页面作为当前页面。
前进（FORWARD）：如果forward 栈为空，则该命令被忽略。否则，将当前页面压入backward 栈，并从forward 栈中弹出一个页面作为当前页面。
访问某网址（VISIT <URL>）：将当前页面压入backward 栈，并将此次访问的网页作为当前页面，清空forward 栈。

二、整体思路

根据栈结构后进先出的顺序，我们很容易想到，可以把用户当前浏览的网页入栈，当用户在新界面点击回退按钮的时候，直接让栈顶元素出栈，让浏览器加载，不就实现了后退功能了吗？前进的功能也类似，于是乎，我们想到用两个栈分别存储在用户当前浏览网页之前/之后的所有页面地址。理想的结构(BackStack回退栈，ForwardStack前进栈)，如下图所示：

三、c++实现代码

#include<iostream>
#include<string>
#include<stack>
using namespace std;
int main(){stack<string> backward,forward;string now,b,c="csw.jlu.edu.cn";while(1){cin>>b;if(b=="VISIT"){cin>>now;cout<<now<<endl;backward.push(c);while(!forward.empty()){forward.pop();}}if(b=="BACK"){if(backward.size()!=0){c=backward.top();backward.pop();cout<<c<<endl;forward.push(now);now=c;}else{cout<<"Ignored"<<endl;c="csw.jlu.edu.cn";}}if(b=="FORWARD"){if(forward.size()!=0){c=forward.top();forward.pop();cout<<c<<endl;backward.push(now);now=c;}else{cout<<"Ignored"<<endl;}}if(b=="QUIT"){break; }if(b!="VISIT"&&b!="BACK"&&b!="FORWARD"&&b!="QUIT"){cout<<"输入错误！"<<endl;}}
}

四、页面按钮实现的前进后退

<input type=button value=刷新 onclick="window.location.reload()">
<input type=button value=前进 onclick="window.history.go(1)">
<input type=button value=后退 onclick="window.history.go(-1)">
<input type=button value=前进 onclick="window.history.forward()">
<input type=button value=后退 onclick="window.history.back()">
<input type=button value=后退并刷新  onclick="window.history.go(-1);window.location.reload()">

下面是history源码，有没有什么发现呢？

interface History {readonly length: number;scrollRestoration: ScrollRestoration;readonly state: any;back(distance?: any): void;forward(distance?: any): void;go(delta?: any): void;pushState(data: any, title?: string, url?: string | null): void;replaceState(data: any, title?: string, url?: string | null): void;
}

五、总结

此面试题在安卓面试中出现比较多。
history对象的存储结构与栈相同，先进后出。

我的微信公众号：架构真经（id：gentoo666），分享Java干货，高并发编程，热门技术教程，微服务及分布式技术，架构设计，区块链技术，人工智能，大数据，Java面试题，以及前沿热门资讯等。每日更新哦！

参考资料：

https://blog.csdn.net/qq_39187019/article/details/86555730
https://blog.csdn.net/mgsky1/article/details/71036856

算法高级（10）-如何实现浏览器的前进、后退功能相关推荐

php微信浏览器自带后退功能禁用,jquery如何实现禁用浏览器后退
jquery实现禁用浏览器后退的方法:首先打开相应的js文件:然后通过"jQuery(document).ready(function () {...}"方法禁用浏览器的back和 ...
10-1-2 数据结构与算法高级(下)
目录三.数据结构与算法高级 3.1 树 3.1.1 树的概念 3.1.2 二叉树 3.1.3 二叉查找树 3.1.4 二叉树的遍历 3.1.5 红黑树 3.1.5.1 左旋(RotateLeft) ...
算法高级（5）-分布式系统选举算法及脑裂
一.选举算法定义分布式中有这么一个疑难问题,客户端向一个分布式集群的服务端发出一系列更新数据的消息,由于分布式集群中的各个服务端节点是互为同步数据的,所以运行完客户端这系列消息指令后各服务端节点的数 ...
2021首期Nature封面：牛津大学ML算法实现10万高压非晶硅原子的模拟 | AI日报
2021首期Nature封面:牛津大学ML算法实现10万高压非晶硅原子的模拟为了对一般无序结构材料有更深的理解,人们广泛研究了非晶硅在高压条件下的富相行为.然而在和原子打交道的层面上,人们一直需要借 ...
算法高级（1）-概述
算法是对特定问题求解步骤的描述.对于同一个问题,我们可能会用不同的算法来求解,我们可以根据算法的可读性.效率等进行取舍.针对不同的数据保存方式,也会有不同的算法. 很多同学会觉得,我工作经验五年,工作 ...
基于蚁群算法的10个城市TSP问题的最短路径研究（附源码及讲解步骤）
基于蚁群算法的10个城市TSP问题的最短路径研究欢迎关注:天际使徒的个人博客 1 蚁群算法 1.1 蚁群算法的流程步骤这里以TSP问题为例,算法设计的流程如下: 步骤1:对相关参数进行初始化,包括 ...
银行卡号校验位的LUHN算法模10“隔位2倍加”校验数的公式
银联卡卡号由三部分组成:发卡机构标识码(bin).发卡机构自定义位.校验码.其中,卡号左起前六位是发卡机构标识代码(BIN),由6位数字组成.BIN号由中国银联复制分配.确认和管理:卡号第七位起事发卡 ...
算法6.10 迪杰斯特拉算法
算法6.10 迪杰斯特拉算法代码实现 //算法6.10 迪杰斯特拉算法 #pragma once #include <iostream>using namespace std;//图的邻 ...
c语言:利用冒泡算法对10个数字进行从小到大的排序
利用冒泡算法对10个数字进行从小到大的排序 #include <stdio.h> int main() {int a[10];int i,j,t;printf("请输入10个数字 ...

算法高级（10）-如何实现浏览器的前进、后退功能