Сохранение логина и пароля
Иногда на сайте используются сессионные куки файлы, при которых после перезапуска приложения приходится вводить логин и пароль заново. Хуже всего что на сайте может отсутствовать функция сохранения пароля и пользователю приходится повторно вводить свой сложный пароль.
Данная проблема решается очень просто при использовании локального хранилища.
Все что нужно сделать это повесить обработчик события на кнопку входа, который будет записывать логин и пароль в localstorage.
Единственной сложностью здесь является найти элемент на страницы. Проще всего это сделать по его ID всего
// Функция для сохранения логина и пароля в localStorage при нажатии на кнопку "Войти"
document.getElementById('loginButton').addEventListener('click', function() {
// Получаем значения из полей ввода
const login = document.getElementById('login').value;
const password = document.getElementById('password').value;
// Сохраняем логин и пароль в localStorage
localStorage.setItem('login', login);
localStorage.setItem('password', password);
// Можете добавить здесь логику для аутентификации пользователя
alert('Логин и пароль сохранены!');
});
Дальше вам нужно добавить событие загрузки страницы, при котором сработает вставка логина и пароля в нужные поля
// Функция для вставки логина и пароля из localStorage в поля ввода при загрузке страницы
window.onload = function() {
// Проверка наличия логина и пароля в localStorage
const storedLogin = localStorage.getItem('login');
const storedPassword = localStorage.getItem('password');
// Если логин и пароль найдены, вставляем их в соответствующие поля
if (storedLogin && storedPassword) {
document.getElementById('login').value = storedLogin;
document.getElementById('password').value = storedPassword;
}
}
Вот так может выглядеть форма входа на сайт. Обратите внимание, что для поиска элементов у нас используется метод getElementById
В разметке вашей страницы у элементов может не оказаться ID, тогда в коде шаблона вы сможете их добавить вручную. Если это не возможно, то используйте другие методы поиска по селектору.
<form id="loginForm">
<label for="login">Логин:</label>
<input type="text" id="login" name="login"><br><br>
<label for="password">Пароль:</label>
<input type="password" id="password" name="password"><br><br>
<button type="button" id="loginButton">Войти</button>
</form>
Write a Comment