При перезагрузке страницы убираются DOM элементы?

Question

[33remido]

При нажатии на кнопку у меня создается див с товаром, но при перезагрузке он убирается. Скорее всего эту проблему может решить localStorage, но я не очень опытен, подскажите, пожалуйста

Answer 1

[Вадим]

И правильно делает, что удаляется.
Вы ведь страницу перезагрузили - соответственно запросили исходный HTML.
Сохраняйте дополнительно в localStorage информацию о товаре, с помощью
localStorage.setItem('cart', JSON.stringify(product))

А при загрузке странице проверяйте что есть в локал стораже и если там есть что-то в соответствующем ключе, то заполняйте корзину элементами.

Comments

[33remido]

а можете подсказать поподробнее пожалуйста?
window.onload = function() {
let storage = localStorage.getItem('cart');
if (storage !== null) {...}

[Вадим]

33remido, а сделайте демку на Jsfiddle чтобы всем было удобнее

[33remido]

Вадим, оно не работает из за того что там генерируемая php переменная
https://jsfiddle.net/nsfvao6k/5/

[Вадим]

33remido, так откройте у себя локально и скопируйте в демку итоговый html, который вам сервер отдаёт

[33remido]

Вадим, держите
https://jsfiddle.net/ct2erf7v/2/

[Вадим]

33remido, ну, как решение на коленке сойдёт.
Не забудьте почистить локалстораж на jsfiddle перед просмотром.

[33remido]

Вадим, спасибо вам большое!

Answer 2

[Дмитрий]

так добавьте просто addToOrder(). Функцию же надо где-то вызвать.
Логичнее div создавать изначально в разметке. Можно сделать скрытым. А по нажатию на кнопку его показывать.