Glo Academy

🏓

@glo_academy

⚡ Фильтры каталога пропадают после обновления страницы

Покупатель выбрал чёрный цвет и размер M, обновил страницу, и фильтры сбросились. Ссылку на подборку другу тоже не скинешь, в адресе пусто. Храни фильтры в адресной строке:

const params = new URLSearchParams(location.search);
const color = params.get('color') ?? 'all';

function setFilter(name, value) {
  params.set(name, value);
  history.replaceState(null, '', '?' + params);
}

new URLSearchParams(location.search) разбирает хвост адреса после знака вопроса. get('color') достаёт значение фильтра, а если его нет, ?? подставляет 'all'. set записывает новое значение, history.replaceState меняет адрес без перезагрузки и лишней записи в истории.

На гифке выбираем чёрный и M, потом обновляем страницу. Сверху фильтры лежали в переменной и пропали. Снизу они в адресе, и страница открылась с теми же фильтрами.

URLSearchParams сам декодирует пробелы и кириллицу, регулярки не нужны. Работает во всех браузерах.

🔥 — если было полезно

@glo_academy | #js_day

✂️ Отзыв покупателя с тегами ломает страницу товара

Покупатель пишет в отзыве <h1>, а мы вставляем текст через innerHTML. Браузер принимает это за разметку, и вместо отзыва на странице висит огромный заголовок с рекламой конкурента. Через тот же отзыв можно подсунуть <img onerror> и запустить чужой скрипт у каждого, кто откроет товар. Текст от пользователя вставляй так:

const p = document.createElement('p');
p.textContent = review.text;
list.append(p);

createElement создаёт пустой абзац, textContent кладёт в него текст как есть: угловые скобки остаются символами, браузер их не разбирает. append добавляет абзац в конец списка.

На гифке один и тот же отзыв. Сверху через innerHTML: тег сработал, реклама вылезла из карточки. Снизу через textContent: на странице ровно то, что написал покупатель.

innerHTML оставь для разметки, которую пишешь сам. Всё, что пришло из формы, из адреса страницы или от других пользователей, вставляй через textContent.

❤️ — если было полезно

@glo_academy | #snippets