Ajax и обратно. Изменения хэша, но где хранится предыдущее состояние страницы?

Я пытаюсь сделать работу ajax с помощью кнопки "Назад" , и я пропустил что-то центральное. Где хранятся предыдущие состояния страницы?

СЛУЧАЙ 1:

Нажмите "Сделать меня красным". происходит событие ajax, а страница становится красной. Hash = #red

Нажмите "Сделать меня желтым". Событие ajax происходит, и страница становится желтой. Hash = #yellow

Нажмите кнопку "Назад" . Хеш теперь возвращается к #red. Но я также хочу, чтобы страница была красной. Он все еще желтый.

CASE 2:

Нажмите "Сделать меня красным". происходит событие ajax, а страница становится красной. Hash = #red

Нажмите "Перейти на другой сайт". Он отправляется в Google.

Нажмите кнопку "Назад" . Мы вернулись на сайт, 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>

Ответ 1

При использовании AJAX важно обновить историю вручную, используя history.pushState

Затем создайте тестирование функции для события onpopstate и по мере необходимости обновите содержимое.

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

Ответ 2

Вместо того, чтобы использовать ваш 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 только упрощает работу.