Plugin LocalStorage

• Installation
• Utilisation
  • Exemple basique
  • Restauration des valeurs en cas d'échec de la 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 entrées de formulaire non soumises des utilisateurs dans le localStorage qui seront restaurées lors du chargement de la page. Ceci est idéal pour éviter la perte de données dans le cas où le navigateur d'un 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 du LocalStorage sont automatiquement effacées lorsqu'un submit de formulaire est appelé.

Installation

Pour installer le plugin localStorage, nous devons :

1. l'importer depuis @formkit/addons.
2. L'ajouter à notre configuration FormKit en tant que plugin.
3. Ajouter la propriété use-local-storage au formulaire cible.

Le createLocalStoragePlugin a des options que vous pouvez configurer :

• prefix - Le préfixe attribué à votre clé localStorage. Par défaut, il s'agit de formkit.
• key - Une clé facultative à inclure dans le nom de la clé localStorage, utile pour associer des données à un utilisateur particulier.
• control - Un nom de champ facultatif pour un champ de votre formulaire que vous souhaitez utiliser pour activer la sauvegarde dans le 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 le localStorage doivent être considérées comme valides. Par défaut, il s'agit de 1 heure.
• debounce - Le délai d'attente à appliquer pour sauvegarder les données dans le localStorage. Par défaut, il s'agit de 200ms
• beforeSave: — Un rappel asynchrone facultatif qui reçoit les données du formulaire. Permet de modifier les données du formulaire avant de les sauvegarder dans le localStorage.
• beforeLoad: — Un rappel asynchrone facultatif qui reçoit les données du formulaire. Permet de modifier les données du 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 le localStorage, ajoutez le use-local-storage à votre formulaire FormKit. La clé localStorage sera votre prefix fourni (par défaut, il s'agit de formkit) et le nom de votre formulaire, par exemple formkit-contact.

Exemple basique

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

Restauration des valeurs en cas d'échec de la soumission

Lorsqu'un utilisateur soumet votre formulaire, l'entrée localStorage correspondante pour le formulaire est supprimée. Avant la suppression, la valeur de l'entrée 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. Ceci est utile pour restaurer les données saisies par l'utilisateur dans le cas où vous rencontrez un échec dans votre processus de soumission, comme une erreur de serveur.

Avec des clés uniques

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

Avec un contrôle

Vous pouvez permettre à un utilisateur de choisir de sauvegarder ses données de formulaire dans 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 callbacks asynchrones beforeSave et beforeLoad, vous pouvez modifier les données qui sont sauvegardées dans localStorage. Cela peut être utile si vous souhaitez exécuter une 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 à partir de localStorage jusqu'à ce que notre callback beforeLoad se résolve.