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 이벤트 제출의 예. 명이트/다크 모드의 사용 사례 :

 < 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. 이 단계를 건너 뛰고 제 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 > 

신용 거래

다음 사람들에게 감사합니다.

• 이 웹 구성 요소 Repo 템플릿에 영감을 주신 Zach Leatherman
• updateForm() 메소드에 대한 솔루션을 제안하는 Nathan Knowler