浏览器浏览记忆（history）几则技巧记录

浏览器浏览记忆（history）几则技巧记录
一般浏览记录模式

假设有三个页面， start.html，通过点击start.html上的链接跳转到 first.html，然后点击first.html上链接跳转到 second.html, 那么在history中记录的历史如下链表：

如下代码例子，页面跳转均以链接实现。

start.html
```
<html>
<head> 
        <style>

        </style>
</head> 
<body>
         <a href="./first.html">go to first html</a>
</body>
</html>
```
first.html
```
<html>
<head> 
        <style>

        </style>
</head> 
<body>
         <a href="./second.html">go to second html</a>
</body>
</html>
```
second.html
```
<html>
<head> 
        <style>

        </style>
</head> 
<body>
         here is second html
</body>
</html>
```
某个页面被浏览过后，在history中被替换

对于一种特殊场景，此页面用户看完后，不想让用户再看到，例如特定页面上，让用户选择一个条件，此选择是一次性的，不能让用户多次选择, 点击回退按钮不显示此页面.

使用 location.replace接口, 实现代码如下， first.html页面点击连接后，跳转到second.html， first.html页面在history中被second.html代替。

浏览到 first.html history记录

从first.html跳转到 second.html后， history记录

这样，当前显示second，点击回退按钮，回退到start页面。

实例代码，其他两个不变。

first.html
```
<html>
<head>
        <style>

        </style>
</head>
<body>
     <a id="go2scond" href="#" onclick="go2second();">go to second html</a>
         <script type="text/javascript">
            function go2second()
            {
                location.replace("./second.html");
            }
         </script> 
</body>
</html> 
```
某个页面之前的所有页面不能再被浏览

如果某个页面之前的页面是一次性显示，对于用户来说不能再被显示，例如当用户选择了所以后的内容后，在最后一步确认后，不能再被修改，用户企图通过浏览器回退按钮重新查看之前的页面，这中条件下，想法让其失效。

history对象，没有提供清空之前浏览页面的接口，此需求可以通过js脚本判断实现：

例如下面demo，用户从start.html浏览到 first.html页面，后浏览到second.html，然后用户点击回退仍然显示 second.html

修改first.html代码如下

具体实现原理是，在之前不能浏览页面中的最后一一个页面脚本中，添加history.forward（1）, 让其向后自动跳转到后面一个页面，对于第一次访问此页面，由于没有后面一个页面，所以不会执行，当浏览到后一个页面后，这时此页面在history中就有了后一个页面，通过后退按钮，当加载此页面时候，就会自动跳转到后一个页面。
```
<html>
<head>
        <style>

        </style>
</head>
<body>
         <a href="./second.html">go to second html</a>
            <script>
            //HTML禁用回退上一浏览页面按钮
            /*
            加入有以上代码的页面无法回退到它
                例如A页面有这段代码，从A链接到B页面，这时一旦在B页面上按回退按钮，则无法回退到A页面
            */
            if(window.history.forward(1) != null)
            {

            }

            </script>

</body>
</html> 
```
浏览历史（前进和后退）与刷新的差别

浏览历史（前进和后退），仅仅加载已经访问过页面的 URL，如果其中有一个页面是以 form 表单 post 方法提交后显示的，浏览历史也仅仅是加载此页面的url，并不提交 post的数据。

刷新，如果有个页面是以提交数据显示的，则刷新会提示用户，是否要重复提交数据：

demo测试代码：

start.php form提交数据到 first.php
```
<html>
<head> 
        <style>

        </style>
</head> 
<body>
    <form action="./first.php" method="post">
        <input type="text" name="para" id="para" value="para" />
        <input type="submit" value="submit" />
    </form>
</body>
</html>
```
first.php是被提交数据后显示的，使用刷新则会提示是否要重复提交数据。点击回退和前进，都没有重复提交数据提示。
```
<html>
<head> 
        <style>

        </style>
</head> 
<body>
         <a href="./second.php">go to second html</a>
</body>
</html>
```
second.php
```
<html>
<head> 
        <style>

        </style>
</head> 
<body>
         here is second html
</body>
</html>
```
通过改造，在first.php中添加 302 跳转，直接跳转到 second，可以避免用户看到数据提交的页面 first.php，同时尝试前进和后退按钮，也不能浏览到first.php，说明在history中不会记录跳转的中间响应（从应用上也不会记录，因为如果记录，则回退按钮则永远不能回到start.php页面，给用户带来不便）。
```
<?php   
//重定向浏览器   
header("Location: /replaceTest/second.php");   
//确保重定向后，后续代码不会被执行   
exit;  
?>    

<html>
<head> 
        <style>

        </style>
</head> 
<body>
         <a href="./second.php">go to second html</a>
</body>
</html>
```
history中记录的链表同replace
相关阅读:
C#解压或压缩文件夹
 C#文件帮助类FoderHelper
C#数据库帮助类SqlHelper
非常有意思的程序猿数据比較
 hdu1066
【SICP练习】149 练习4.5
【spring+websocket的使用】
Android Studio 使用正式签名进行调试
 基于空间直方图meanshift跟踪
 Intel为Google的物联网平台Brillo推出开发板Edison
原文地址：https://www.cnblogs.com/lightsong/p/4456903.html

浏览器浏览记忆（history）几则技巧记录

一般浏览记录模式

某个页面被浏览过后，在history中被替换

某个页面之前的所有页面不能再被浏览

浏览历史（前进 和 后退）与刷新的差别

浏览历史（前进和后退）与刷新的差别