storage form
v2.0.1
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 แบบฟอร์มโดยการละเว้นแบบฟอร์มส่งปุ่ม/องค์ประกอบอินพุต คุณมีตัวเลือกเล็กน้อย (เลือกหนึ่งในนั้น):
npm install @daviddarnes/storage-form ตรวจสอบให้แน่ใจว่าคุณรวม <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 > ด้วยขอบคุณผู้คนต่อไปนี้:
updateForm()
