Вопрос:
Но при обновлении это все исчезает. Я так понимаю мне нужен какой-то локальный сервер, что-бы там хранились все эти данные и показывались на сайте
Ответ:
При открытии вашей страницы в браузере, браузер скачивает страницу, и, среди прочего, выполняет отрисовку DOM (HTML разметки) и ваш JavaScript-код.
Теперь подумайте, когда вы перезагрузили страницу - то срабатывает то-же самое действие, с сервера (или из любого другого хранилища) пришла страница и отрисовалась. Откуда ей знать, какие данные были введены перед загрузкой?
отрисовка на стороне сервера
Есть технологии, позволяющие присылать страницу уже с данными, но про них речь не идёт
По-этому, для сохранения данных надо чтобы на этапе выполнения вашего JavaScript-кода, JavaScript запрашивал данные с сервера или из
localStorage.
Вопрос:
Для чего нужен локальный сервер?
Ответ:
Локальный сервер (в веб разработке), зачастую, нужен для имитации отправки/запроса данных на сервер и облегчает настройку ответов на запросы со стороны сервера. Это позволяет не использовать настоящий сервер (не забываем, что настоящий сервер требует денег), да и с заливкой кода на реальный порой бывает не всё так гладко. А если вы 10 часов подряд каждые пару минут вносите изменения и хотите увидеть результат? Возникают разного рода напряги.
Если коротко, то локальный сервер быстрее, дешевле, проще, легче.
Ссылки:
localstorage (ru)
Хранение данных в браузере (ru)
Глубже:
fetch (ru)
Ресурс, на котором есть ссылки на фейковый рест апи сервер. Суть такая, что туда можно слать запросы и настоящий сервер будет отвечать, а вы - на стороне JS обрабатывать ответ сервера.