Минимальная гостевая книга только на 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.
Заключение
Теперь у вас есть минимальная гостевая книга, которую вы можете использовать без использования серверной части или базы данных. Не забудьте обеспечить защиту от спама и других атак, если вы хотите использовать эту гостевую книгу на своем сайте.