storage form

storage-form

Веб -компонент, который позволяет отправлять данные в локальное хранилище.

Демо | Дальнейшее чтение

Примеры

Пример использования общего использования:

 < script type =" module " src =" storage-form.js " > </ script >

< storage-form >
  < form >
    < label >
      Example
      < input type =" text " name =" example " value =" value " />
    </ label >
    < button > Submit </ button >
  </ form >
</ storage-form >

Пример отправки с событием change вместо кнопки отправки. Используйте вариант для режима Light/Dark:

 < script type =" module " src =" storage-form.js " > </ script >

< storage-form >
  < form >
    < label >
      < input type =" radio " name =" theme " value =" dark " />
      < span > Dark mode </ span >
    </ label >
    < label >
      < input type =" radio " name =" theme " value =" light " />
      < span > Light mode </ span >
    </ label >
    < label >
      < input type =" radio " name =" theme " value ="" checked />
      < span > Default mode </ span >
    </ label >
    < br />
    < label >
      < input type =" hidden " name =" contrast " value />
      < input type =" checkbox " name =" contrast " value =" true " />
      < span > High contrast </ span >
    </ label >
  </ form >
</ storage-form >

Пример зацепления на событие storage :

 < script type =" module " src =" storage-form.js " > </ script >

< storage-form >
  < form >
    < label >
      Update the
      < code > output </ code >
      by checking the box
      < input type =" hidden " name =" output " value />
      < input type =" checkbox " name =" output " value =" updated " />
    </ label >
  </ form >
</ storage-form >

< output > </ output >
< script >
  const updatePage = ( ) => {
    document . querySelector ( "output" ) . innerHTML = JSON . stringify (
      window . localStorage
    ) ;
  } ;
  window . addEventListener ( "storage" , updatePage ) ;
  updatePage ( ) ;
</ script > 

Функции

Этот веб -компонент позволяет вам:

• Используйте регулярные элементы формы для манипулирования данными в локальном хранилище
• Вызовать событие storage на странице, чтобы засеть в другом месте на странице
• Поддерживайте состояние форм, используя локальное хранилище, когда страница обновляется или перезагружена
• Необязательно отправьте форму в событии change форм, пропустив кнопку «Отправить формы»/«Входной» элемент

Установка

У вас есть несколько вариантов (выберите один из них):

1. Установите через NPM: npm install @daviddarnes/storage-form
2. Загрузите источник вручную из GitHub в свой проект.
3. Пропустите этот шаг и используйте скрипт непосредственно через сторонний CDN (не рекомендуется для использования производства)

Использование

Убедитесь, что вы включите <script> в свой проект (выберите один из них):

 <!-- Host yourself -->
< script type =" module " src =" storage-form.js " > </ script > 

 <!-- 3rd party CDN, not recommended for production use -->
< script
  type =" module "
  src =" https://www.unpkg.com/@daviddarnes/[email protected]/storage-form.js "
> </ script > 

 <!-- 3rd party CDN, not recommended for production use -->
< script
  type =" module "
  src =" https://esm.sh/@daviddarnes/[email protected] "
> </ script > 

Кредит

С благодарностью следующим людям:

• Zach Leatherman для вдохновения этого шаблона Repo веб -компонента
• Натан Ноулер для предложения решения метода updateForm()