Question

我使用HTML5历史记录API修改网址，因为选择了某些产品属性（例如绿色汽车，蓝色汽车）以允许深层链接共享。

但是，这不是单页应用，所以我不想劫持用户的后退按钮：如果他们按下，我想让他们转到上一页，而不是以前的汽车颜色。

实现这一目标的最佳方法是什么？

示例历史：

/page1
/page2
/page2?color=green
/page2?color=red
/page2?color=blue

然后按浏览器的后退按钮返回/page1

Answer 1

看起来我应该一直在使用

history.replaceState();

而不是history.pushState();。它取代了浏览器的URL，但没有添加到历史对象，因此后退按钮可以按照我的意愿工作。

history.replaceState（）与history.pushState（）完全相同，只是replaceState（）修改当前历史记录条目而不是创建新条目。

developer.mozilla.org

Answer 2

这是一个使用sessionStorage的解决方案，它使您的应用程序能够转到以前存储的页面，而不会破坏可用性期望/浏览器后退按钮功能。移动到以前的URL（例如，不同的颜色）是在浏览器上为用户使用后退按钮的预期结果。

<强> JS

function getCurrentPath() {
    return sessionStorage.getItem("currentPath");
}

function getPreviousPath() {
    return sessionStorage.getItem("previousPath");
}

function setCurrentPath(path) {
    var currentPath = getCurrentPath();
    if (currentPath != path) {
        sessionStorage.setItem("previousPath", currentPath);
        sessionStorage.setItem("currentPath", path);
    } else {
        console.log('Path has not changed: ' + path);
    }
}

function goToPrevious() {
    var previousPath = getPreviousPath();
    if (previousPath && previousPath != 'null') {
        window.location.href = previousPath;
    } else {
        alert('Previous page is not defined.');
    }
}

<强> test1.html

<!DOCTYPE html>
<html>
    <head>
        <title>Test 1</title>
        <meta charset="UTF-8">
        <script src="test.js"></script>
        <script>
            setCurrentPath('test1.html');
            console.log('Current Path:', getCurrentPath());
            console.log('Previous Path:', getPreviousPath());
        </script>
    </head>
    <body>
        <button onclick="goToPrevious();">Go to previous page</button>
        <a href="test2.html">Test 2</a>
        <a href="?color=red">Red</a>
        <a href="?color=green">Green</a>
        <a href="?color=blue">Blue</a>
    </body>
</html>

<强> test2.html

<!DOCTYPE html>
<html>
    <head>
        <title>Test 2</title>
        <meta charset="UTF-8">
        <script src="test.js"></script>
        <script>
            setCurrentPath('test2.html');
            console.log('Current Path:', getCurrentPath());
            console.log('Previous Path:', getPreviousPath());
        </script>
    </head>
    <body>
        <button onclick="goToPrevious();">Go to previous page</button>
        <a href="test1.html">Test 1</a>
        <a href="?color=red">Red</a>
        <a href="?color=green">Green</a>
        <a href="?color=blue">Blue</a>
    </body>
</html>

您可以看到，这允许用户更改查询字符串参数，但这不会影响通过转发操作移动到上一页的功能，只需在路径之间存储更改即可。您可以通过使用数组而不是像我在这里完成的两个值来扩展它，但如果您希望这样做，我会将其留下来实现。

HTML5历史记录 - 返回上一页的完整页面按钮？

2 个答案: