Сохранить/восстановить все переменные javascript на кнопке браузера назад/вперед

Question

Я хочу восстановить всю измененную страницу ajax вместе с переменными javascript в памяти при нажатии кнопки назад. Он был добавлен в историю браслера вручную, используя window.history.pushState(). Я пытаюсь сохранить/восстановить страницу с помощью:

  function changeURL(){ 
       window.history.pushState(document.body.innerHTML,"","..."); 
      } 

      window.onpopstate = function(e){ 
       if(e.state){ 
        document.body.innerHTML = e.state; 
       } 
      }; 

Казалось бы, это работает, но только проблема, что JavaScript переменные, которые были в памяти на странице времени была загружена больше не существует, как они изменяются последующими ajax, но я не сделал никаких условий для их восстановления при нажатии кнопки возврата. Как восстановить все эти значения для переменных?

Answer 1

1. Напишите функцию, которая будет сериализовать все переменные, которые вы хотите отслеживать, в некоторый простой в управлении формат (я бы предложил JSON).
2. Напишите вторую функцию, которая может принимать сериализованные данные и анализировать/десериализовывать ее, восстанавливая переменные по мере их появления (это будет зеркальное отображение вашей первой функции).
3. Найдите подходящее место для хранения вашего сериализованного состояния, чтобы оно сохранялось на разных загрузках страниц. Лично я использовал куки для этого в прошлом, хотя вы также можете использовать localStorage или любой другой механизм, который вы предпочитаете.
4. Добавьте код на страницу, чтобы сохранить/обновить сериализованное состояние либо при каждом изменении состояния, либо, по крайней мере, в какой-то момент прямо перед тем, как пользователь покинет страницу.
5. Добавьте код на свою страницу, чтобы проверить сохраненное/сериализованное состояние при загрузке страницы и загрузить его, если он существует.

Редактировать: Я бы также рекомендовал не обрабатывать целое число document.body.innerHTML как ваше сериализованное «состояние». Должна быть возможность выделить переменные, которые вы используете для изменения содержимого HTML, и использовать это как ваше состояние. Затем вы можете просто восстановить соответствующий HTML, повторно применяя переменные.