Plugin LocalStorage

• Installation
• Utilisation
  • Exemple basique
  • Restauration des valeurs en cas d'échec de soumission
  • Avec des clés uniques
  • Avec un contrôle
  • Avec modification des données

En utilisant la fonction createLocalStoragePlugin de @formkit/addons, vous pouvez facilement sauvegarder les saisies utilisateur non soumises dans localStorage qui seront restaurées au chargement de la page. C'est idéal pour éviter la perte de données dans le cas où le navigateur de l'utilisateur plante, l'onglet est fermé, ou un autre problème imprévu provoque le rechargement de votre application avant que l'utilisateur puisse soumettre ses données.

Les données LocalStorage sont automatiquement effacées lorsqu'un submit de formulaire est appelé.

Installation

Pour utiliser ce plugin avec FormKit, installez @formkit/addons :

yarn add @formkit/addons

Une fois que vous avez installé le package addons, vous devrez enregistrer le plugin avec FormKit. La fonction createLocalStoragePlugin a des options que vous pouvez configurer :

• prefix - Le préfixe attribué à votre clé localStorage. Par défaut, c'est formkit.
• key - Une clé optionnelle à inclure dans le nom de la clé localStorage, utile pour associer les données à un utilisateur particulier.
• control - Un nom de champ optionnel pour un champ de votre formulaire que vous souhaitez utiliser pour activer la sauvegarde dans localStorage lorsque true. La valeur du champ doit être un booléen.
• maxAge - Le temps (en millisecondes) pendant lequel les données sauvegardées dans localStorage doivent être considérées comme valides. Par défaut, c'est 1 heure.
• debounce - Le délai d'attente à appliquer pour sauvegarder les données dans localStorage. Par défaut, c'est 200ms
• beforeSave : — Un callback asynchrone optionnel qui reçoit les données du formulaire. Permet la modification des données du formulaire avant la sauvegarde dans localStorage.
• beforeLoad : — Un callback asynchrone optionnel qui reçoit les données du formulaire. Permet la modification des données localStorage avant de les appliquer au formulaire.

// formkit.config.js
import { defaultConfig } from '@formkit/vue'
import { createLocalStoragePlugin } from '@formkit/addons'

const config = defaultConfig({
  plugins: [
    createLocalStoragePlugin({
      // valeurs par défaut du plugin :
      prefix: 'formkit',
      key: undefined,
      control: undefined,
      maxAge: 3600000, // 1 heure
      debounce: 200,
      beforeSave: undefined,
      beforeLoad: undefined
    }),
  ],
})

export default config

Utilisation

Pour activer la sauvegarde dans localStorage, ajoutez use-local-storage à votre form FormKit. La clé localStorage sera votre prefix fourni (par défaut, c'est formkit) et le name de votre formulaire, par exemple formkit-contact.

Exemple basique

C'est tout ! Les données de votre formulaire seront maintenant sauvegardées à chaque événement commit que le form reçoit. Elles resteront valides jusqu'au maxAge défini dans votre configuration du plugin, et les données localStorage sont effacées lorsque l'événement submit est déclenché sur le formulaire cible.

Restauration des valeurs en cas d'échec de soumission

Lorsqu'un utilisateur soumet votre formulaire, l'entrée correspondante dans le localStorage est supprimée. Avant la suppression, la valeur de l'entrée du localStorage est stockée en mémoire et peut être récupérée en appelant la méthode node.restoreCache() dans votre gestionnaire de soumission. Cela est utile pour restaurer les données saisies par l'utilisateur dans le cas où vous auriez un échec dans votre processus de soumission, comme une erreur de serveur.

Avec des clés uniques

Si vous enregistrez des données dans le localStorage dans le contexte d'une application où plusieurs utilisateurs pourraient partager le même appareil, vous pouvez fournir une key qui est unique à l'utilisateur et chaque utilisateur aura alors sa propre entrée dans le localStorage.

Avec un contrôle

Vous pouvez permettre à un utilisateur de choisir de sauvegarder ses données de formulaire dans le localStorage en fournissant le nom d'un champ qui retourne une valeur boolean. Lorsque true, les valeurs seront sauvegardées.

Avec modification des données

En utilisant les rappels asynchrones beforeSave et beforeLoad, vous pouvez modifier les données qui sont sauvegardées dans le localStorage. Cela peut être utile si vous souhaitez exécuter une sorte de fonction d'obfuscation ou envoyer les données à votre backend pour les chiffrer. Dans cet exemple, nous obfusquons les données en encodant en base64 les valeurs du formulaire.

Notez que le formulaire est désactivé lors du chargement des données depuis le localStorage jusqu'à ce que notre rappel beforeLoad soit résolu.