Сохранение состояния html-страницы при обновлении страницы
Как я уже упоминал в других своих вопросах, я создаю собственное веб-приложение.
Теперь у меня есть это приложение -> Вот Plunker! Вы можете увидеть это лучше здесь. Где у меня есть вкладка в заголовке, и я могу перемещаться по нескольким страницам и загружать их содержимое.
<!DOCTYPE html>
<html>
<head>
<link rel = "stylesheet" href = "style.css">
<script src = "https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src = "script.js"></script>
</head>
<body>
<a href = "link1">Link 1</a>
<a href = "link2">Link 2</a>
<div id = "content">
<!-- Page content displays here -->
</div>
</body>
</html>
$(document).ready(function(){
$('a').click(function(e){
var page = $(this).attr('href');
$('#content').load(page + '.html');
return false; // don't follow the link
});
});
Работает нормально! Но у меня проблемы с сохранением состояния страницы.
Например, если я нахожусь на странице 2 и обновил браузер, страница вернется в начальное состояние. Как я могу оставить текущую страницу при обновлении.
Я очень благодарен за каждое решение или совет!
Если вы не беспокоитесь о ссылках на определенные разделы, а просто хотите сохранить текущую страницу для обновления, другой идеей может быть просто сохранение переменной page в сессия / локальное хранилище, cookie или сеансе на стороне сервера.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Вы должны воспользоваться браузером API истории. При каждой загрузке контента вы должны сохранять состояние в истории.
При жестком обновлении вам необходимо проанализировать URL-адрес и получить правильный контент.
При таком подходе следует помнить одну вещь: вы должны перепрыгивать через препятствия, чтобы поисковым роботам было легче проиндексировать все ваши «страницы».
Другой подход - использовать Турболинки.
Ваше здоровье.
Вы знаете, как это лучше всего сделать? Приветствую и заранее спасибо!
На pinkr.co ваш код запускается в iframe, поэтому вы не можете действительно наблюдать изменения URL-адресов, поскольку только документ верхнего уровня будет отображать его URL-адрес в строке URL-адресов браузера. Что вы можете сделать, чтобы проверить это, - просто вставьте что-то вроде этого в консоль браузера и наблюдайте за изменениями URL-адресов: history.pushState({urlPath: 'test.html'}, '', '/test.html');
Вы не можете сделать это на сайтах, подобных pinkr.co. У вас должна быть правильная локальная настройка env. :(
Я запускаю его также на моем локальном сервере, я могу протестировать его здесь напрямую! Ты спасаешь мне день :)
при обновлении он направляет меня на страницу, но я теряю заголовок :(
Что ж, вам определенно нужно написать еще немного кода, я просто направил вас в правильном направлении с помощью History API. На самом деле не могу сделать больше на SO. :)
Вы можете найти добавление и изменение записей в истории полезным. Также см. Измените URL-адрес без перезагрузки страницы.