Изменить класс div по клику --- и * сохранить * изменение

Question

Есть много вопросов, которые задают, как изменить класс div в обработчике кликов JavaScript, например, здесь: Изменить стиль Div по клику . Я хорошо это понимаю (просто измените .className), и это работает.

Однако, когда я перехожу по ссылке со своей страницы в другое место и затем нажимаю кнопку «Назад», имена классов возвращаются. (Safari и Firefox понимают это правильно, Chrome - нет.) В Chrome большинство других изменений, которые я делаю динамически, например, для обработки кликов, также возвращаются, когда я возвращаюсь на страницу (хотя он запоминает недавно вставленные новые элементы div).

Обратите внимание, что ни Chrome, ни другие браузеры не перезагружают страницу, когда я нажимаю "назад"; они просто должны взять его из кеша. (Я обновляю состояние на сервере, используя ajax, поэтому он прекрасно работает, когда браузеры перезагружают страницу.)

Я на самом деле не веб-разработчик, так что это немного озадачивает. Какова стандартная практика здесь? Должен ли я использовать history.replaceState () каждый раз, когда меняю div? Должен ли я сохранить изменения в переменной состояния и перезагружать их каждый раз, когда происходит событие popstate? Вместо того, чтобы менять имена классов div, я должен удалить div и вставить новый (со всеми дочерними элементами старого div)?

Я использую ванильный JavaScript здесь (даже без jquery) и предпочел бы сохранить его, если это возможно.

Answer 1

Возможно, но вам понадобятся дополнительные способы запомнить это

Вы можете попробовать один из них:

Cookies: Это определенно выглядит как лучший способперейти

Pass Vars на URL : пример: www.mywebsite.com?myvar=red.Это было бы проще с использованием PHP, но все еще возможно в чистом JS (но я не рекомендую это)

Сохранить его в базе данных: (не рекомендовать это вообще)

Это лишь некоторые варианты, но я не рекомендую использовать их для того, что вы хотите (это пустая трата времени и усилий, если вы взвесите все за и против того, что вы хотите сделать)

Answer 2

Вы можете сохранить состояние в куки и восстановить его при загрузке страницы. Также вы можете сохранить его на стороне сервера (отправить состояние с помощью ajax, когда оно изменилось). И отправьте подготовленный документ клиенту при повторном запросе. Браузер забывает все состояния при перезагрузке страницы.