Производительный и лёгкий (всего 705 байта) ES-модуль для сохранения и восстановления данных из полей ввода
Добавьте для поля формы дата-атрибут localstorage, чтобы никогда не потерять данные пользователя.
<input type="text" name="name" placeholder="Николай" data-localstorage="name">Библиотека "Input save" запоминает все введёные данные пользователем во внутреннее хранилище браузера LocalStorage и бережно их восстанавливает после перезагрузки страницы или неправильного завершения работы на странице.
- Скачай файл input-save.min.js
- Положи файл в проект
- Подключи к странице и запусти
<!doctype html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Мой проект</title>
</head>
<body>
...
<script type="module">
import { InputSave } from './путь-до-файла/input-save.min.js';
const inputSave = new InputSave();
</script>
</body>
</html>- Для полей ввода добавь дата-атрибут
data-localstorageс уникальным значением
Библиотека автоматически игнорирует поля с типом
password, чтобы пароль не записывался вlocalStorageв открытом виде.
<!doctype html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Мой проект</title>
</head>
<body>
<main>
<section>
Авторизация
<form action="" method="post">
<label>
Имя:
<input type="text" name="name" data-localstorage="name">
</label>
</form>
</section>
<section>
Регистрация
<form action="" method="post">
<label>
Имя:
<input type="text" name="name" data-localstorage="reg-name">
</label>
</form>
</section>
</main>
<script type="module">
import { InputSave } from './путь-до-файла/input-save.min.js';
const inputSave = new InputSave();
</script>
</body>
</html>В этом примере, все поля ввода будут сохранять свои значения в LocalStorage при вводе пользователем данных. При следующей загрузке страницы значения этих полей будут автоматически восстановлены из LocalStorage, если они были сохранены ранее.
Обратите внимание, что использование атрибута localstorage уникально и не должно повторяться среди различных полей формы, чтобы избежать конфликтов в LocalStorage.
npm i --save input-saveimport { InputSave} from "input-save";
const inputSave = new InputSave();Метод destroy(form) может принимать элемент формы для отчистки конкретной формы или использоваться destroy() без аргументов, чтобы отчистить все формы.
Используй метод destroy если хочешь удалить слушатели, очистить localStorage и сохранённые значения полей формы.
Например, после отправки формы
<section>
<h2>Авторизация</h2>
<form id="form-name" action="" method="post">
<label>
Имя:
<input type="text" name="name" data-localstorage="name">
</label>
<button type="submit">Отправить</button>
</form>
</section>import { InputSave } from './путь-до-файла/input-save.min.js';
const inputSave = new InputSave();
const form = document.querySelector('#form-name');
form.addEventListener('submit', (event) => {
event.preventDefault();
inputSave.destroy(form); /* удаляет слушатели, очищает localStorage и сохранённые значения инпутов у конкретной формы с id="form-name" */
});Если нужно очистить любую форму или все, то вызывай destroy() без параметров
form.addEventListener('submit', (event) => {
event.preventDefault();
inputSave.destroy(); /* удаляет слушатели, очищает localStorage и сохранённые значения инпутов */
});