前端随笔一——浏览器的历史回退自我实现
这是我第一次写随笔,不足的地方还望见谅。
首先说说我这次代码的由来,之前为了实现一个页面的前进和后退,一般会想到使用 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 }