save-form-data-storage

Записывает данные, введенные в форму HTML, в LocalStorage и извлекает их по мере необходимости.

Installation

npm install save-form-data-storage

import

import SaveFormDataStorage from "save-form-data-storage";

Usage example

HTML

Разбиваем форму на логические группы, в примере group_1, group_1, …, group_5.

<form id="my-form" action="">

  <input type="text" name="name" class="group_1">
  <input type="text" name="ege" class="group_2">
  
  <input type="radio" name="gender" value="male" class="group_3">
  <input type="radio" name="gender" value="female" class="group_3">

  <input type="checkbox" name="language" value="russian" class="group_4">
  <input type="checkbox" name="language" value="english" class="group_4">

  <select name="country" class="group_5">
    <option value="russia">Россия</option>
    <option value="france">Франция</option>
    <option value="germany">Германия</option>
  </select>

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

</form>

JS

Инициализируем класс SaveFormDataStorage.

new SaveFormDataStorage('#my-form',[
    // selector: логический блок, event:события для слежки
    {selector: '.group_1', event: 'input'},
    {selector: '.group_2', event: 'input'},
    {selector: '.group_3', event: 'change'},
    {selector: '.group_4', event: 'change'},
    {selector: '.group_5', event: 'change'},
  ],{
    btnText: "Достать из хранилища", // текст на кнопки (опционально)
    parentSelectorBtn: ".row--custom_flex", // родитель кнопки (опционально, кнопка по умолчанию вставляется в конец формы)
})

Settings

new SaveFormDataStorage(idForm,inputsArray,options)

Arguments

| названия | тип | описания | |:------------|:---------|:---------------------------------------------| | idForm | string | идентификатор формы за который будем следить | | inputsArray | array | элементы формы за которыми будем сделить | | options | object | опциональные настройки |

Options

| названия | тип | описания | |:------------------|:---------|:-------------------------| | btnText | string | текст на кнопки | | parentSelectorBtn | string | селектор родителя кнопки |