Plugin LocalStorage

• Instalação
• Uso
  • Exemplo básico
  • Restaurando valores em envios falhos
  • Com chaves únicas
  • Com um controle
  • Com modificação de dados

Usando a função createLocalStoragePlugin de @formkit/addons, você pode facilmente salvar entradas de formulário de usuário não submetidas no localStorage, que serão restauradas ao carregar a página. Isso é ótimo para prevenir a perda de dados no caso de o navegador do usuário travar, a aba ser fechada ou outro problema inesperado causar o recarregamento da sua aplicação antes que o usuário possa submeter seus dados.

Os dados do LocalStorage são automaticamente limpos quando um submit de formulário é chamado.

Instalação

Para usar este plugin com o FormKit, instale @formkit/addons:

yarn add @formkit/addons

Depois de instalar o pacote de addons, você precisará registrar o plugin com o FormKit. O createLocalStoragePlugin tem opções que você pode configurar:

• prefix - O prefixo atribuído à sua chave do localStorage. O padrão é formkit.
• key - Uma chave opcional para incluir no nome da chave do localStorage, útil para vincular dados a um usuário específico.
• control - Um nome de campo opcional para um campo no seu formulário que você gostaria de usar para habilitar o salvamento no localStorage quando true. O valor do campo deve ser um booleano.
• maxAge - O tempo (em milissegundos) que o localStorage salvo deve ser considerado válido. O padrão é 1 hora.
• debounce - O debounce aplicado ao salvar dados no localStorage. O padrão é 200ms
• beforeSave: — Um callback assíncrono opcional que recebe os dados do formulário. Permite a modificação dos dados do formulário antes de salvar no localStorage.
• beforeLoad: — Um callback assíncrono opcional que recebe os dados do formulário. Permite a modificação dos dados do localStorage antes de aplicá-los ao formulário.

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

const config = defaultConfig({
  plugins: [
    createLocalStoragePlugin({
      // padrões do plugin:
      prefix: 'formkit',
      key: undefined,
      control: undefined,
      maxAge: 3600000, // 1 hora
      debounce: 200,
      beforeSave: undefined,
      beforeLoad: undefined
    }),
  ],
})

export default config

Uso

Para habilitar o salvamento no localStorage adicione o use-local-storage ao seu form FormKit. A chave do localStorage será o seu prefix fornecido (o padrão é formkit) e o name do seu formulário, por exemplo, formkit-contact.

Exemplo básico

Pronto! Os dados do seu formulário agora serão salvos a cada evento commit que o form receber. Eles permanecerão válidos até o maxAge definido na configuração do seu plugin, e os dados do localStorage são limpos quando o evento submit é disparado no formulário alvo.

Restaurando valores em envios falhos

Quando um usuário envia seu formulário, a entrada correspondente no localStorage para o formulário é excluída. Antes da exclusão, o valor da entrada do localStorage é armazenado na memória e pode ser recuperado chamando o método node.restoreCache() no seu manipulador de envio. Isso é útil para restaurar dados inseridos pelo usuário no caso de você ter uma falha no seu processo de envio, como um erro de servidor.

Com chaves únicas

Se você está salvando dados no localStorage no contexto de um aplicativo onde vários usuários podem compartilhar o mesmo dispositivo, você pode fornecer uma key que seja única para o usuário e cada usuário terá então sua própria entrada no localStorage.

Com um controle

Você pode permitir que um usuário opte por salvar seus dados de formulário no localStorage fornecendo o nome de um campo que retorna um valor booleano. Quando true, os valores serão salvos.

Com modificação de dados

Usando os callbacks assíncronos beforeSave e beforeLoad, você pode modificar os dados que são salvos no localStorage. Isso pode ser útil se você quiser executar algum tipo de função de ofuscação ou enviar os dados para o seu backend para criptografá-los. Neste exemplo, nós ofuscamos os dados codificando os valores do formulário em base64.

Observe que o formulário é desativado ao carregar dados do localStorage até que nosso callback beforeLoad seja resolvido.