浏览器做返回操作保留js动态生成的html内容

在页面一利用ajax动态生成html插入到页面内，用户点击相关的加载内容进行跳转。为了用户体验所以未做新页面跳转，在原页面进行了跳转，跳转到页面二。

那么问题来了~在用户想要返回时~不管是浏览器后退还是history.back都只能回到页面一加载前的状态，对于用户体验是极差了。

思考了一会，觉得一共有这么几种解决办法：

1 . 页面一不做原页面跳转，用新页面跳转。然后在页面二做关闭页面操作，这样一来返回操作就等于回到了页面一加载的状态。

2 . 页面一做原页面跳转，页面一的动态加载的内容做预先加载，然后隐藏加锚点，点击加载后就去隐藏。点击跳转到页面二时传一段url值，页面二点击返回就直接返回到页面一去隐藏状态然后锚点直接跳到固定位置。

前面两个方法感觉都不怎么漂亮，找了许久找到方法三：

利用location.hash

页面一：

<input type="button" value="添加" onclick="set('a')"/><br />

var ff = navigator.userAgent.indexOf('Firefox') != -1;
function set(html) {
    if(html='a'){
       document.body.innerHTML += '<br>' + '<a href="2.html">页面二</a>';
       if (location.hash.indexOf(html) == -1){
           location.hash += html;
       }
    }
}
if (!ff) {
    var hash = location.hash;
    if (hash.indexOf('a') != -1){
        set('a');
    }
}

页面二：

<a href="javascript:history.back()">回到页面一</a>

这么一来就OK了不过如果页面二是新开页面就不行了~问题待续

转载于:https://my.oschina.net/452187971/blog/475051