Ajax 和返回按钮。哈希变化，但前一页状态存储在哪里？答案

【问题标题】：Ajax and back button. Hash changes, but where is previous page state stored?Ajax 和返回按钮。哈希变化，但前一页状态存储在哪里？
【发布时间】：2014-04-26 01:04:43
【问题描述】：

我正在尝试使 ajax 与后退按钮一起工作，但我缺少一些中心内容。以前的页面状态存储在哪里？

案例 1：

点击“让我变红”。 ajax 事件发生，页面变红。哈希 = #red

点击“让我变黄”。 ajax 事件发生，页面变黄。哈希 = #黄色

点击后退按钮。哈希现在回到#red。但我也希望页面是红色的。还是黄色的。

案例 2：

点击“让我变红”。 ajax 事件发生，页面变红。哈希 = #red

单击“转到其他站点”。它交给谷歌。

点击后退按钮。我们回到网站，hash = #red，但我也希望页面是红色的！

<!DOCTYPE html>
<html>
<style>
    .red{background:red}
    .yellow{background:yellow}
</style>
<head>
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript">
    $(function(){
        $('.ajax_thing').click(function(){
            location.hash=$(this).attr('action_type');
            return false
        })
        var originalTitle=document.title
        function hashChange(){
            var page=location.hash.slice(1)
            if (page!=""){
                $('#content').load(page+".html #sub-content")
                document.title=originalTitle+' – '+page
            }
        }
        if ("onhashchange" in window){ // cool browser
            $(window).on('hashchange',hashChange).trigger('hashchange')
        }else{ // lame browser
            var lastHash=''
            setInterval(function(){
                if (lastHash!=location.hash)
                    hashChange()
                lastHash=location.hash
            },100)
        }
    })

    </script>
</head>
<body>
<menu>
       <li><a class="ajax_thing" id = "red_action" action_type="red">Make me red</a></li>
        <li><a class="ajax_thing" id = "yellow_action" action_type="yellow">Make me yellow</a></li>
</menu>
        <li><a href = "http://www.google.com">Go to other site</a></li>
</body>
</html>
<script>

$("#red_action").click(function(e) {
  // ajax here. on success:
    $("body").removeClass("yellow");
    $("body").addClass("red");
})

$("#yellow_action").click(function(e) {
  // ajax here. on success:
    $("body").removeClass("red");
    $("body").addClass("yellow");
})

</script>

【问题讨论】：

你应该看看github.com/browserstate/history.js
我没有看到任何ajax request，而且你忘记了很多semicolons
它可以工作，所以丢失的分号一定没问题。我从其他地方获取了大部分代码。我不执行实际的 ajax 请求，因为我希望它能够按原样为这里的每个人工作。但是我改变了 dom，这就是 ajax 请求会做的事情。你认为真正的 ajax 请求会神奇地使它工作吗？
"它可以工作，所以缺少的分号一定没问题。" ... o_O
虽然使用语句 separator ; 是一种很好的做法，但它们并非在所有情况下都是强制性的。（当然，“必须没问题”的论点有点愚蠢，但我没有看到任何缺少; 的行有问题）。如果您想了解详细信息，请前往stackoverflow.com/questions/444080/…

标签： javascript ajax

【解决方案1】：

与其使用 JavaScript 来驱动 URL，不如让 URL 驱动 JavaScript。让window.onhashchange 事件处理程序完成所有工作。其他一切都应该只改变哈希值。

您甚至不需要链接的点击处理程序，只需将 url 设置为正确的哈希：

<a href="#red">Red</a>

然后，您的 hashchange 处理程序会处理剩下的事情：

function hashChange() {
    var page = location.hash.slice(1);
    if (page) {
        $('#content').load(page+".html #sub-content");
        document.title = originalTitle + ' – ' + page;
        switch (page) {
            // page specific functionality goes here
            case "red":
            case "yellow":
                $("body").removeClass("red yellow").addClass(page);
                break;
        }
    }
}

完全更改哈希的唯一原因是，如果您希望能够返回页面并让它根据 URL 加载相同的状态。所以，你已经有了让 URL 驱动 JavaScript 的需求，对吧？否则你为什么要更改哈希？将功能从点击处理程序中移出并移至 hashchange 事件只会简化事情。

【讨论】：

但这仍然无法加载内容。此外，ajax 不是 href 驱动的。在我的实际代码中，它是一个调用 ajax 并添加标签的按钮。
@user984003 - 我不明白。为什么不加载内容？为什么使用按钮而不是链接很重要？
按照我理解你的答案的方式，我需要编写代码来专门将状态更改回原来的样子，例如将背景设置为红色。但是用户可能已经通过 ajax 添加了标签、更改了评级并将商品添加到购物车中。我需要一种方法来一举获得这种状态。 pushState 或 history.js 似乎是人们推荐的。
登录后表示这是一个令人难以置信的解决方案，几乎可以解决令人费解的问题。

【解决方案2】：

使用 AJAX 时，使用 history.pushState 手动更新历史记录很重要

然后为 onpopstate 事件创建一个函数测试并根据需要更新内容。

https://developer.mozilla.org/en-US/docs/Web/Guide/DOM/Manipulating_the_browser_history

【讨论】：

欢迎来到 Stack Overflow。请总结答案中的链接；这样，如果链接过时，答案也不会完全没用。
这似乎是人们推荐的，或者对于所有浏览器，history.js。（实际上我最终做了一些更简单的事情，如果发生更改，我只需重新加载页面，使用哈希跟踪更改）