<p>首先通过js保存需要保持不变的DOM块<br/></p><pre style="background-color:#262e37;color:#ffffff;font-family:'Consolas';font-size:11.3pt;"><span style="color:#660e7a;font-weight:bold;font-style:italic;">sessionStorage</span>.<span style="color:#4ac60a;">setItem</span>(<span style="color:#e6db74;">"prod_container2"</span>, <span style="color:#660e7a;font-weight:bold;">$</span>(<span style="color:#e6db74;">".</span><span style="color:#a6e22e;">prod_container2</span><span style="color:#e6db74;">"</span>).<span style="color:#4ac60a;">html</span>());</pre><p>然后在加载前做判断并插入到原来块内</p><pre style="background-color:#262e37;color:#ffffff;font-family:'Consolas';font-size:11.3pt;"><span style="color:#f92672;">var </span><span style="color:#660e7a;font-weight:bold;font-style:italic;">html</span><span style="color:#f92672;">=</span><span style="color:#660e7a;font-weight:bold;font-style:italic;">sessionStorage</span>.<span style="color:#4ac60a;">getItem</span>(<span style="color:#e6db74;">"prod_container2"</span>);<br/><span style="color:#660e7a;font-weight:bold;font-style:italic;">console</span>.<span style="color:#4ac60a;">log</span>(<span style="color:#660e7a;font-weight:bold;font-style:italic;">html</span>);<br/><span style="color:#f92672;">if</span>(<span style="color:#660e7a;font-weight:bold;font-style:italic;">html </span><span style="color:#f92672;">&& </span><span style="color:#660e7a;font-weight:bold;font-style:italic;">html </span><span style="color:#f92672;">!== </span><span style="color:#e6db74;">'undefined' </span><span style="color:#f92672;">&& </span><span style="color:#660e7a;font-weight:bold;font-style:italic;">html </span><span style="color:#f92672;">!== null</span>){<br/> <span style="color:#660e7a;font-weight:bold;">$</span>(<span style="color:#e6db74;">'.</span><span style="color:#a6e22e;">prod_container2</span><span style="color:#e6db74;">'</span>).<span style="color:#4ac60a;">html</span>(<span style="color:#660e7a;font-weight:bold;font-style:italic;">html</span>);<br/>}</pre><p>找到上面的解决方法前，百度搜索说可以通过history.back实现，但我在线测试根本就无法实现返回页面不刷新的情况，所以就有了上面的解决方法。</p><p>如下来源于：https://www.cnblogs.com/zc290987034/p/7094615.html</p><p style="margin: 10px auto; padding: 0px; text-align: justify; font-family: "PingFang SC", "Helvetica Neue", Helvetica, Arial, "Microsoft Yahei", sans-serif; font-size: 12px; white-space: normal; background-color: rgb(255, 255, 255);"><span style="margin: 0px; padding: 0px; font-size: 18pt;">windows窗口对象（历史）history.go(),history.back(),history.forward()。</span></p><p style="margin: 10px auto; padding: 0px; text-align: justify; font-family: "PingFang SC", "Helvetica Neue", Helvetica, Arial, "Microsoft Yahei", sans-serif; font-size: 12px; white-space: normal; background-color: rgb(255, 255, 255);"><span style="margin: 0px; padding: 0px; font-size: 18pt;"> 因为windows对象引用不是必须的。所以windows.history.go() == history.go()的。</span></p><p style="margin: 10px auto; padding: 0px; text-align: justify; font-family: "PingFang SC", "Helvetica Neue", Helvetica, Arial, "Microsoft Yahei", sans-serif; font-size: 12px; white-space: normal; background-color: rgb(255, 255, 255);"><span style="margin: 0px; padding: 0px; font-size: 18pt;"> </span><span style="margin: 0px; padding: 0px; font-size: 18pt;">go()方法只有一个参数，可以是整数、负数。如果是正数，就前进。负数就是后退。（相当于Forward和Back的区别）</span></p><p style="margin: 10px auto; padding: 0px; text-align: justify; font-family: "PingFang SC", "Helvetica Neue", Helvetica, Arial, "Microsoft Yahei", sans-serif; font-size: 12px; white-space: normal; background-color: rgb(255, 255, 255);"><span style="margin: 0px; padding: 0px; font-size: 18pt;"> </span><span style="margin: 0px; padding: 0px; font-size: 18pt; line-height: 1.5;">因此，后退一页，可用下面的代码：(后退多页，只需改变go的参数)</span></p><p style="margin: 10px auto; padding: 0px; text-align: justify; font-family: "PingFang SC", "Helvetica Neue", Helvetica, Arial, "Microsoft Yahei", sans-serif; font-size: 12px; white-space: normal; background-color: rgb(255, 255, 255);"><span style="margin: 0px; padding: 0px; font-size: 18pt;"> </span><span style="margin: 0px; padding: 0px; font-size: 18pt; line-height: 1.5;"> window.history.go(-1)；</span></p><p style="margin: 10px auto; padding: 0px; text-align: justify; font-family: "PingFang SC", "Helvetica Neue", Helvetica, Arial, "Microsoft Yahei", sans-serif; font-size: 12px; white-space: normal; background-color: rgb(255, 255, 255);"><span style="margin: 0px; padding: 0px; font-size: 18pt; line-height: 1.5;">要前进一页，只需要使用正数；</span></p><p style="margin: 10px auto; padding: 0px; text-align: justify; font-family: "PingFang SC", "Helvetica Neue", Helvetica, Arial, "Microsoft Yahei", sans-serif; font-size: 12px; white-space: normal; background-color: rgb(255, 255, 255);"><span style="margin: 0px; padding: 0px; font-size: 18pt; line-height: 1.5;"> history.go(1)；</span></p><p style="margin: 10px auto; padding: 0px; text-align: justify; font-family: "PingFang SC", "Helvetica Neue", Helvetica, Arial, "Microsoft Yahei", sans-serif; font-size: 12px; white-space: normal; background-color: rgb(255, 255, 255);"><span style="margin: 0px; padding: 0px; font-size: 18pt;"> </span><span style="margin: 0px; padding: 0px; font-size: 18pt; line-height: 1.5;">另外，用back()和forward()方法可以实现同样的操作：</span></p><p style="margin: 10px auto; padding: 0px; text-align: justify; font-family: "PingFang SC", "Helvetica Neue", Helvetica, Arial, "Microsoft Yahei", sans-serif; font-size: 12px; white-space: normal; background-color: rgb(255, 255, 255);"><span style="margin: 0px; padding: 0px; font-size: 18pt;"> </span><span style="margin: 0px; padding: 0px; font-size: 18pt; line-height: 1.5;"> history.back(); 后退</span></p><p style="margin: 10px auto; padding: 0px; text-align: justify; font-family: "PingFang SC", "Helvetica Neue", Helvetica, Arial, "Microsoft Yahei", sans-serif; font-size: 12px; white-space: normal; background-color: rgb(255, 255, 255);"><span style="margin: 0px; padding: 0px; font-size: 18pt; line-height: 1.5;"> history.forward(); 前进</span></p><p style="margin: 10px auto; padding: 0px; text-align: justify; font-family: "PingFang SC", "Helvetica Neue", Helvetica, Arial, "Microsoft Yahei", sans-serif; font-size: 12px; white-space: normal; background-color: rgb(255, 255, 255);"><span style="margin: 0px; padding: 0px; font-size: 18pt; line-height: 1.5;">还可以用length属性查看历史中的页面数：</span></p><p style="margin: 10px auto; padding: 0px; text-align: justify; font-family: "PingFang SC", "Helvetica Neue", Helvetica, Arial, "Microsoft Yahei", sans-serif; font-size: 12px; white-space: normal; background-color: rgb(255, 255, 255);"><span style="margin: 0px; padding: 0px; font-size: 18pt; line-height: 1.5;"> history.length;</span></p><p style="margin: 10px auto; padding: 0px; text-align: justify; font-family: "PingFang SC", "Helvetica Neue", Helvetica, Arial, "Microsoft Yahei", sans-serif; font-size: 12px; white-space: normal; background-color: rgb(255, 255, 255);"><span style="margin: 0px; padding: 0px; font-size: 18pt; line-height: 1.5;">2.history.go(-1)和history.back()的区别</span></p><p style="margin: 10px auto; padding: 0px; text-align: justify; font-family: "PingFang SC", "Helvetica Neue", Helvetica, Arial, "Microsoft Yahei", sans-serif; font-size: 12px; white-space: normal; background-color: rgb(255, 255, 255);"><span style="margin: 0px; padding: 0px; font-size: 18pt; line-height: 1.5;"> history.go(-1)表示后退与刷新。如数据有改变也随之改变</span></p><p style="margin: 10px auto; padding: 0px; text-align: justify; font-family: "PingFang SC", "Helvetica Neue", Helvetica, Arial, "Microsoft Yahei", sans-serif; font-size: 12px; white-space: normal; background-color: rgb(255, 255, 255);"><span style="margin: 0px; padding: 0px; font-size: 18pt; line-height: 1.5;"> history.back()只是单纯的返回到上一页。</span></p><p><br/></p>
相关文章
