Ajax 和后退按钮。散列更改，但上一页状态存储在哪里？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17769884/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Ajax and back button. Hash changes, but where is previous page state stored?
提问by user984003
I am trying to make ajax work with the back button and am missing something central. Where are the previous page states stored?
我正在尝试使 ajax 与后退按钮一起工作，但缺少一些核心内容。以前的页面状态存储在哪里？
CASE 1:
情况1：
Click "make me red". ajax event occurs and page turns red. Hash = #red
点击“让我变红”。ajax 事件发生，页面变为红色。哈希 = #red
Click "make me yellow". ajax event occurs and page turns yellow. Hash = #yellow
点击“让我变黄”。ajax 事件发生，页面变黄。哈希 = #黄色
Click back button. Hash is now back to #red. But I also want the page to be red. It's still yellow.
单击返回按钮。哈希现在回到#red。但我也希望页面是红色的。它仍然是黄色的。
CASE 2:
案例2：
Click "make me red". ajax event occurs and page turns red. Hash = #red
点击“让我变红”。ajax 事件发生，页面变为红色。哈希 = #red
Click "Go to other site". It goes to Google.
单击“转到其他站点”。它去谷歌。
Click back button. We're back to site, hash = #red, but I also want the page to be 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>
采纳答案by j00lz
When using AJAX it's important to update the history manually using history.pushState
使用 AJAX 时，使用 history.pushState 手动更新历史记录很重要
Then create a function testing for an onpopstate event and updating the content as required.
然后为 onpopstate 事件创建一个函数测试并根据需要更新内容。
https://developer.mozilla.org/en-US/docs/Web/Guide/DOM/Manipulating_the_browser_history
https://developer.mozilla.org/en-US/docs/Web/Guide/DOM/Manipulating_the_browser_history
回答by gilly3
Rather than using your JavaScript to drive your URLs, let your URLs drive your JavaScript. Let the window.onhashchangeevent handler do all the work. Everything else should just change the hash.
与其使用 JavaScript 来驱动 URL，不如让 URL 驱动 JavaScript。让window.onhashchange事件处理程序完成所有工作。其他一切都应该改变哈希。
You don't even need click handlers for links, just set the url to the right hash:
您甚至不需要链接的点击处理程序，只需将 url 设置为正确的哈希：
<a href="#red">Red</a>
Then, your hashchangehandler takes care of the rest:
然后，您的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;
}
}
}
The only reason to change the hash at all is if you want to be able to come back to the page and have it load the same state based on the URL. So, you already have the requirement to let the URL drive the JavaScript, right? Else why are you changing the hash? Moving functionality out of click handlers, and into the hashchangeevent only simplifies things.
更改散列的唯一原因是，如果您希望能够返回页面并根据 URL 加载相同的状态。所以，您已经有了让 URL 驱动 JavaScript 的要求，对吗？否则你为什么要改变哈希？将功能从点击处理程序中移到hashchange事件中只会简化事情。
