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. تخطي هذه الخطوة واستخدم البرنامج النصي مباشرة عبر 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 لإلهام قالب ريبو مكون الويب هذا
• ناثان نولر لاقتراح حل لطريقة updateForm()