Алексей Уколов

Нужно просто запретить событию подниматься выше:

$('li').on('click', function(event){
   var data = $(this).data('key');

   event.stopPropagation();
});

почему не пишут легкий в реализации SPA без всяких фреймворках

Потому что "загрузить всю страницу в фоне, а не просто через стандартный браузерный механизм перехода по ссылке" - это ещё не SPA.

Ведь в кеш записывается весь result равный телу функции

С чего вы это взяли вообще? Что функция вернула, то и записывается в кеш. Вы же не саму её записали, а результат её вызова. Alert к этому результату не имеет никакого отношения и всегда возвращает undefined.

const moves = [];

... 
moves.push(JSON.stringify(jsonmove));
...

const datamove = "[\n" + moves.join(",\n") + "\n]";

Это если исходить из того, что вам нужен именно такой формат, когда каждый элемент массива на отдельной строке.
Иначе же можно упростить до

const moves = [];

... 
moves.push(jsonmove);
...

const datamove = JSON.stringify(moves);

На оба вопроса ответ один - первым в replacer передаётся весь объект целиком. Поэтому он и выводится, а если убрать return, то дальше обработка и не идёт.
Я же вам отвечал уже на этот вопрос: https://qna.habr.com/answer?answer_id=2165468#answ...

Например, вы хотите использовать дефолтное значение или значение из кэша, если не удалось получить данные с сервера.

Зачем итерировать по кривому формату данных, если можно просто сразу его превратить в нормальный?

setItems(json[0].pizzas)
...
items.map((pizza) => <PizzaBlock key={pizza.title} {...pizza} />)

Второй файл перезаписывает свойство. Используйте вместо свойства подписку на событие DOMContentLoaded.

В документации есть пример обработки закрытия: https://getbootstrap.com/docs/5.2/components/alert...
Но поскольку вам нужно, чтобы сообщение показывалось только когда в LocalStorage нет флага, то и создание алерта вам нужно реализовать через код: https://getbootstrap.com/docs/5.2/components/alert...

Где вы с клиента body-то передаёте? Вот то-то и оно.

Метод hasOwnProperty() возвращает логическое значение, указывающее, содержит ли объект указанное свойство.

Object.prototype.hasOwnProperty()

try {
  await fetch(...);
} catch (error) {
  // Обрабатываем ошибку как хотим
}

fetch(...)
  .catch((error) => /* Обрабатываем ошибку как хотим */);

const xhr = new XMLHttpRequest();
xhr.open(...);
xhr.send();

xhr.onload = function() {
  if (xhr.status != 200) {
    // Обрабатываем ошибку как хотим

    return;
  }

  ...
};

Я не понимаю, что тут может остаться непонятным с предыдущего вашего вопроса.
Цель - избаваться от циклических ссылок, которые делают сериализацию объекта невозможной. При этом ориентироваться требуется не на название поля, а на его значение.
Именно это и происходит в функции replacer, с поправкой на то, что при первом вызове в replacer передаётся весь объект целиком с пустым ключом:

Initially, the replacer function is called with an empty string as key representing the object being stringified.

https://developer.mozilla.org/en-US/docs/Web/JavaS...

key != "" && value == meetup

Переводится как "если ключ не пуст (т.е. не первая итерация, в которой value ссылается на объект целиком) и значение равно искомому объекту, его нужно пропустить и не сериализовывать".

В нормальном мире "кнопка" не должна никуда "вести". Кнопка запускает какой-либо процесс, за переход на другой URL же отвечает ссылка.
Если вы сделаете нормальную семантическую разметку: попадаем под "определённые условия", то рендерим div или выключенную кнопку (тут нужно смотреть по контексту), а не попадаем - обычную ссылку, то всё будет работать без всяких плясок с бубном.

if (result_Time == true && result_Day == true)
Ну вы учебник-то не закрывайте, раз у вас есть склонность к придумыванию собственного синтаксиса.

Очевидно, в функции load у вас возникает ошибка и из-за неё не срабатывает весь последующий код.
Скорее всего, дело в том, что document.querySelector('.louder') ничего не находит, нужно поиск элемента тоже делать внутри load.

window.onload = () => {
    setInterval(() => {
        document.querySelector('.louder').classList.add('remove');
    }, 3000);
}

Потому что вы написали "введённое число равно пять ИЛИ семь". И движок это "семь" читает не как человек, а как отдельное условие, которое всегда равно true.
num == 5 || num == 7

const dataNew = {};

data.forEach(
  (item) => dataNew[item.City] ? dataNew[item.City].push(item) : dataNew[item.City] = [item]
);

Есть ещё вариант с reduce, но он, имхо, гораздо менее читаемым получается.

P.S. Это не фильтрация, а группировка.

Проблема не в том, что "функция не останавливается", а в том, что вы при каждом клике на кнопку создаёте ещё один обработчик клика по .inner-of-fake-HTML. В итоге после второго клика на кнопку обработчик клика по .inner-of-fake-HTML сработает дважды и так далее.

$('.selector-of-deep').click(function() {   // нажатие на кнопку
        $('.inner-of-fake-HTML').click(function(event) { // случайный id

Зачем вам вообще ловить клик по .selector-of-deep, если он сам только добавляеть ещё один обработчик события?