Сохранять изменения DOM при использовании кнопки возврата

Question

У меня есть таблица HTML с кнопкой удаления в каждой строке. Кнопка удаления сделает вызов AJAX на сервере, чтобы удалить запись, и при успешном выполнении строка будет удалена из таблицы.

HTML:

<table> 
    <tr> 
     <td>Foo</td> 
     <td><button class="delete-row" type="button">Delete Row</button></td> 
    </tr> 
</table> 

JavaScript:

$(function() { 
    $('button.delete-row').click(function() { 
     // Would delete the row with an AJAX request 
     $(this).closest('tr').remove(); 
    }); 
}); 

Вот демо: https://jsfiddle.net/05vmz344/

Это работает отлично, за исключением, когда пользователь перейдет по ссылке на другую страницу, а затем возвращается на этой странице, используя кнопку возврата браузера. Пользователю показана устаревшая версия таблицы с удаленными остальными строками (т. Е. Изменения DOM теряются).

Я посмотрел на другие подобные вопросы на переполнение стека и предложения включают в себя:

• Обновление URL окрошка (window.location.hash)
• Установка заголовка Cache-Control, чтобы заставить браузер перезагрузить страницу
• Использование скрытых полей ввода для отслеживания удаленных строк, при загрузке страницы удалять строки в соответствии с скрытыми полями
• Загрузите таблицу с помощью AJAX (вместо предоставления ему на стороне сервера)

Однако ни одна из них не кажется хорошим решением этой проблемы. Есть ли лучшие решения для этого?

Кажется, что я нахожусь в точке, где веб-сайт становится скорее настольным приложением, и, возможно, что-то вроде Apache Wicket или AngularJS действительно придет в свои руки.

Answer 1

Опции 1, 2 и 5 кажется ОК. Я не вижу, как может работать третий вариант, потому что браузеру не нужно сохранять изменения в значениях полей.

Так что, если вы не идти одностраничных-веб-приложению пути, как AngularJS и избежать навигационной проблемы, не перейти на другую страницу, вы должны иметь дело с кэшем просмотра проблем. Пользователь также мог бы щелкнуть закладку, которая отличается, но похожа на проблему с кнопкой «Назад».

Кроме того, это не очень сильный аргумент, но если вы посмотрите на Stack Overflow, вы увидите, что он использует Cache-Control и ajax-запросы.