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

时间 2019-11-30

原文原文链接

通常浏览记录模式

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

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

start.htmlhtml

<html>
<head> 
        <style>

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

first.htmljava

<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中被替换

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

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

浏览到 first.html history记录url

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

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

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

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

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

通常浏览记录模式

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

某个页面以前的全部页面不能再被浏览

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

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