‏form-saver: نجات فرم‌های نیمه‌کاره

فرم بلند رو تا نصفه پر کردی و مرورگر بسته شده؟ آرون گوستافسون برای همین سناریو یه وب‌کامپوننت (یعنی یه تگ HTML سفارشی که خودت تعریفش می‌کنی) به اسم form-saver منتشر کرده. کافیه دور فرمت بپیچیش تا مقدار فیلدها همین‌طور که کاربر تایپ می‌کنه تو localStorage ذخیره شه و دفعهٔ بعد که صفحه لود شد، خودکار برگرده سر جاش. تو مستنداتش اومده که هدفش دقیقاً crash recovery و جلسه‌های نیمه‌کاره‌ست، نه ذخیرهٔ دائمی داده.

کامپوننت سراغ اولین داخل خودش می‌ره و کلید ذخیره‌سازی رو از روی همون فرم می‌سازه، با قالب form-saver:{method}:{resolvedActionUrl}. اگه خواستی دستی عوضش کنی، اتریبیوت storage-key هست. بعد از یه سابمیت موفق هم داده‌های ذخیره‌شده پاک می‌شن، مگه اسم فیلدهایی رو تو retain بیاری:

<form-saver retain="name email">
  <form action="/contact" method="post">
    <input name="name" />
    <input name="email" type="email" />
    <textarea name="message"></textarea>
    <button type="submit">Send</button>
  </form>
</form-saver>

تو این مثال message بعد از ارسال خالی می‌شه ولی name و email می‌مونن. اگه بخوای انتخاب با خود کاربر باشه، retain-choice یه چک‌باکس opt-in به فرم اضافه می‌کنه که به‌صورت پیش‌فرض درست قبل از اولین دکمهٔ سابمیت می‌شینه. با retain-choice-container هم می‌تونی یه سلکتور CSS بدی تا چک‌باکس داخل همون المان بشینه، و متن خود چک‌باکس با retain-choice-label عوض می‌شه.

از نظر پوشش، input (به‌جز type="file" و دکمه‌ها)، textarea و select تک‌انتخابی و چندانتخابی پشتیبانی می‌شن. فیلد فایل عمداً بیرون گذاشته شده. سه متد saveFormState()، restoreFormState() و clearSavedData() هم در دسترسه تا دستی کنترلش کنی. کامپوننت روی Custom Elements v1، Light DOM و ES Modules ساخته شده، پس روی مرورگرهای قدیمی به polyfill نیاز داری. نصبش هم با npm install @aarongustafson/form-saver ـه و لایسنسش MIT.

نکات کلیدی:

• مقدار فیلدها همون موقع تایپ تو localStorage ذخیره می‌شه و بعد از لود دوبارهٔ صفحه برمی‌گرده
• کلید ذخیرهٔ پیش‌فرض form-saver:{method}:{resolvedActionUrl} ـه و با storage-key قابل بازنویسیه
• اتریبیوت retain فیلدهای انتخابی رو بعد از سابمیت موفق نگه می‌داره و بقیه پاک می‌شن
• retain-choice یه چک‌باکس opt-in برای کاربر می‌سازه، با لیبل و محل قابل تنظیم
• input از نوع file پشتیبانی نمی‌شه؛ کامپوننت Light DOM ـه و با لایسنس MIT منتشر شده