Совет Как

Минимальная гостевая книга только на HTML и JavaScript

В этой статье мы рассмотрим, как создать минимальную гостевую книгу только с помощью HTML и JavaScript, без использования серверной части или базы данных.

Как это работает?

Гостевая книга будет представлена в виде списка сообщений, которые будут сохраняться в localStorage браузера. Каждый раз, когда пользователь добавляет новое сообщение, оно будет сохраняться в localStorage, а затем отображаться на странице.

Создание структуры страницы

Для создания гостевой книги мы будем использовать стандартную структуру HTML. Начнем с создания формы для добавления нового сообщения:

<form>
  <label for="name">Имя:</label>
  <input type="text" id="name" name="name">

  <label for="message">Сообщение:</label>
  <textarea id="message" name="message"></textarea>

  <button type="submit">Отправить</button>
</form>

Здесь мы создаем форму, которая содержит поля для имени и сообщения, а также кнопку для отправки сообщения.

Затем мы создаем список сообщений:

<ul id="messages"></ul>

Добавление сообщений

Теперь мы можем перейти к добавлению сообщений в список. Для этого нам нужно написать JavaScript-код, который будет работать с формой и списком сообщений.

// Получаем элементы формы и списка сообщений
const form = document.querySelector('form');
const messagesList = document.querySelector('#messages');

// При отправке формы добавляем новое сообщение в список
form.addEventListener('submit', (event) => {
  // Отменяем стандартное поведение формы
  event.preventDefault();

  // Получаем значения полей формы
  const name = form.elements.name.value;
  const message = form.elements.message.value;

  // Создаем новый элемент списка
  const li = document.createElement('li');
  li.textContent = `${name}: ${message}`;

  // Добавляем новый элемент в список
  messagesList.appendChild(li);

  // Очищаем поля формы
  form.elements.name.value = '';
  form.elements.message.value = '';

  // Сохраняем сообщения в localStorage
  saveMessages();
});

// Загружаем сообщения из localStorage при загрузке страницы
loadMessages();

// Функция для сохранения сообщений в localStorage
function saveMessages() {
  localStorage.setItem('guestbook', messagesList.innerHTML);
}

// Функция для загрузки сообщений из localStorage
function loadMessages() {
  const messages = localStorage.getItem('guestbook');
  if (messages) {
    messagesList.innerHTML = messages;
  }
}

Как вы можете видеть, мы используем две функции - saveMessages и loadMessages - для сохранения и загрузки сообщений из localStorage. При отправке формы мы создаем новый элемент списка и добавляем его в список сообщений. Затем мы сохраняем сообщения в localStorage.

Заключение

Теперь у вас есть минимальная гостевая книга, которую вы можете использовать без использования серверной части или базы данных. Не забудьте обеспечить защиту от спама и других атак, если вы хотите использовать эту гостевую книгу на своем сайте.