storage form

storage-form

允許您將數據提交到本地存儲的Web組件。

演示|進一步閱讀

例子

一般用法示例：

 < 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 > 

特徵

此Web組件允許您：

• 使用常規表單元素在本地存儲中操縱數據
• 調用頁面上的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）啟發此Web組件回購模板
• 內森·諾爾勒（Nathan Knowler）為updateForm()方法提出解決方案