前端随笔一——浏览器的历史回退自我实现

这是我第一次写随笔，不足的地方还望见谅。

首先说说我这次代码的由来，之前为了实现一个页面的前进和后退，一般会想到使用 history 的 back 函数，但有时候并不能完美的后退。有时会出现 A 后退到 B ，B 后退到 C ，然后 C 后退又回到了 B ，之后就是死循环了。查阅网上的资料后发现，可能是 B 页面有 Ajax 等影响 B 页面，使得从历史栈中加载出的 B 页面向后退请求并刷新了页面，使得 B 入栈了。对于这种情况，我看到有人说使用 sessionStorage 来解决。我尝试的写了一下，解决了。于是，共享一下自己的代码，肯定是有更好的方法的，只是我的知识还没有涉及到，望大家见谅。我只写了后退这个动作的入栈和出栈，想要实现前进的话，同样的道理，再写一个栈，在回退出栈时把出来的 URL 入栈保存就是了。

 1 /* 历史Url入栈;因网页中有Ajax，使得页面后退后刷新，back()函数后退后的页面Url也入栈，形成死循环。故重新实现history。 */
 2 function pushHistory(hisstr){
 3     if(sessionStorage.historyurl == null || sessionStorage.historyurl == ""){
 4         var array = new Array();
 5         array.push(hisstr);
 6         sessionStorage.historyurl = array.join(";");
 7     }else{
 8         var array = sessionStorage.historyurl.split(";");
 9         array.push(hisstr);
10         sessionStorage.historyurl = array.join(";");
11     }
12 }
13 
14 /* 历史Url出栈 */
15 function popHistory(){
16     var array = sessionStorage.historyurl.split(";");
17     if(array.length <= 0){
18         return null;
19     }
20     var hisstr = array.pop();
21     sessionStorage.historyurl = array.join(";");
22     return hisstr;
23 }

 

转载于:https://www.cnblogs.com/HcatTrees/p/8364852.html