FormKeeper

Edición completa de FormKeeper con soporte para opciones avanzadas, además de personalización más clara y compleja.

Ideal para los usuarios más experimentados y que desean crear proyectos altamente escalables.

El siguiente ejemplo explica cómo salvar un form con el id "saveIt". Además, ignora los campos de password, por lo que ambos se pierden; también, existe una función que determina si existen elementos salvados, y si existen, aparecen botones para restaurar o limpiar los valores salvados.

registro.html

<form id="saveIt">
  <label for="nombres">Nombres: </label><br>
  <input type="text" name="nombres" id="nombres"><br><br>
  <label for="apellidos">Apellidos: </label><br>
  <input type="text" name="apellidos" id="apellidos"><br><br>
  <label for="username">Nombre de Usuario: </label><br>
  <input type="text" name="username" id="username"><br><br>
  <label for="password">Contraseña: </label><br>
  <input type="password" name="password" id="password"><br><br>
  <label for="passwordR">Repetir Contraseña: </label><br>
  <input type="password" name="passwordR" id="passwordR"><br><br>
  <label for="email">Correo Electrónico: </label><br>
  <input type="email" name="email" id="email"><br><br>
</form>

<button id="restaurar" style="display: none">Restaurar</button>
<button id="limpiar" style="display: none">Limpiar</button>

<script src="https://cdn.jsdelivr.net/formkeeper/1/FormKeeper.min.js" charset="utf-8"></script>
<script src="registro.js" charset="utf-8"></script>

registro.js

const saveIt = new FormKeeper({
  domEl: 'saveIt',
  ignorarDomEls: ['password', 'passwordR']
})

$('#restaurar').click(function () {
  saveIt.restaurar(() => {
    alert('Elementos Restaurados con FormKeeper')
  })
})

$('#limpiar').click(function () {
  saveIt.limpiar(() => {
    alert('Elementos Limpiados con FormKeeper')
    $('#restaurar').fadeOut('400')
    $('#limpiar').fadeOut('400')
  })
})

if (saveIt.guardados() > 0) {
  $('#restaurar').fadeIn('400')
  $('#limpiar').fadeIn('400')
}

Resultado

Puede recargar la página con el enlace de abajo, cerrar el navegador y volverlo a abrir, reiniciar la computadora. No importa, de cualquier forma su información está a salvo. Para recuperarla, presione el botón al final del formulario.

Recargar página

Esta documentación es una adaptación del README.md de: https://github.com/EdGraVill/FormKeeper

Instalación

Como cualquier otra librería, su implementación se basa en su invocación dentro del documento HTML. Pero esta vez, la librería, al tratarse de un Objeto, no depende de la carga del documento completo para funcionar; por lo que se puede incluir desde el <head>.

Librería Descargada

<!DOCTYPE html>
<html>
  <head>
    [...]
    <title>...</title>
    <script src="./ruta/a/FormKeeper.js" charset="utf-8"></script>
  </head>
  <body>
    [...]
  </body>
</html>

CDN con jsDelivr

<!DOCTYPE html>
<html>
  <head>
    [...]
    <title>...</title>
    <script src="https://cdn.jsdelivr.net/formkeeper/1/FormKeeper.min.js" charset="utf-8"></script>
  </head>
  <body>
    [...]
  </body>
</html>

Uso

Crear una nueva instancia

Para que funcione correctamente, hay que crear una nueva instancia del objeto FormKeeper y almacenarla en una constante.

Ejemplo

<!DOCTYPE html>
<html>
  [...]
  <body>
    <form id="ejemplo">
      <input type="text" name="nombres">
      <input type="text" name="apellidos">
    </form>

    <script type="text/javascript">
      const salvarForm = new FormKeeper( domEl/Lista/Opciones [, encriptacion] )
    </script>
  </body>
</html>

Guardado de los Datos

Los datos se guardan automáticamente al detectar que ha cambiado el input, ya sea después de agregarle un nuevo caracter a los que son de entrada de texto, o al cambio para los que son de interacción.

Restauración de los Datos

El método para restaurar los valores almacenados en memoria es FormKeeper.prototype.restaurar( callback ).

Ejemplo

const salvarForm = new FormKeeper('ejemplo')

salvarForm.restaurar()

Además, el método admite por parámetro un callback que se ejecuta una vez los datos se hayan restaurado.

Ejemplo con Callback

const salvarForm = new FormKeeper('ejemplo')

salvarForm.restaurar(() => {
  alert('¡Sus datos regresaron a como los dejó! :)')
})

También, los Datos pueden ser restaurados de forma automática al cargar la página. Para conseguirlo, es necesario ingresar por primer parámetro un objeto con las opciones deseadas.

Ejemplo con Autorestauración

const opcionesFK = {
  domEl: 'ejemplo',
  restaurarDefault: true // <-- Por defecto su valores es 'false'
}

const salvarForm = new FormKeeper(opcionesFK)

Limpieza de los Datos

El método para restaurar los valores almacenados en memoria es FormKeeper.prototype.limpiar( [callback, confirmación] ). También existe un método estático que limpia todos los datos de FormKeeper.

Ejemplo

// En caso de usar jQuery para escuchar eventos y borrar la información del form en cuestión
const salvarForm = new FormKeeper('ejemplo')

$('#ejemplo').submit(function() {
  [...]

  salvarForm.limpiar()
})

Además, el método admite por parámetro un callback que se ejecuta una vez los datos se hayan limpiado.

Ejemplo con Callback

// En caso de usar jQuery para escuchar eventos y borrar la información del form en cuestión
const salvarForm = new FormKeeper('ejemplo')

$('#ejemplo').submit(function() {
  [...]

  salvarForm.limpiar(() => {
    console.log('FormKeeper limpiado.')
  })
})

También se puede elegir, por segundo parámetro y mediante un Boleano si mostrar o no un mensaje de confirmación antes de limpiar la información; además se puede personalizar el mensaje de confirmación mediante un String.

Confirmación de Limpieza

// En caso de usar jQuery para escuchar eventos y borrar la información del form en cuestión
const salvarForm = new FormKeeper('ejemplo')

$('#ejemplo').submit(function() {
  [...]

  salvarForm.limpiar(() => {
    console.log('FormKeeper limpiado.')
  }, '¿Listo para borrar la información?')
})

FormKeeper( domEl/Lista/Opciones [, encriptacion] )

El objeto FormKeeper acepta por parámetro dos valores. el primero es obligatorio, y puede ser:

Un DOM Element que contenga múltiples inputs y sus variantes.
Un DOM Element que sea un simple <input>, <select>, <textarea>, etc. Esto en caso de sólo querer mantener seguro un solo DOM Element
Un Array como lista de múltiples y específicos DOM Elements.
Un objeto con Opciones Avanzadas

El segundo parámetro es opcional, y recibe como valor un Boolean, que por defecto se encuentra como true. Esto para indicar si la información antes de almacenarse se encriptará.

domEl

La forma más básica de inicializar FormKeeper es simplemente indicándole por parámetro el id u objeto almacenado de:

<form>, <div>, etc; contenedor de inputs y sus variantes.
DOM Element simple (Que sea un input o sus variantes).

HTML de Ejemplo

<!DOCTYPE html>
<html>
  [...]
  <body>
    <form id="ejemplo">
      <input id="nombres" type="text" name="nombres">
      <input id="apellidos" type="text" name="apellidos">
    </form>
  </body>
</html>

Para nuestro .js podemos encontrarnos con dos situaciónes:

En caso de querer mantener a salvo todo el form.

// Indicando un objeto almacenado:
const miForm = document.getElementById('ejemplo')

const salvarForm = new FormKeeper(miForm)

// Indicando el id de nuestro form:
const salvarForm = new FormKeeper('ejemplo') // <- Yo certifico este método 👌👍

En caso de sólo mantener a salvo un DOM Element específico.

// Indicando un objeto almacenado:
const miNombres = document.getElementById('nombres')

const salvarForm = new FormKeeper(miNombres)

// Indicando el id de nuestro elemento específico:
const salvarForm = new FormKeeper('apellidos') // <- Yo certifico este método 👌👍

Lista (Array)

Otra forma "básica" de inicializar FormKeeper es indicarle por parámetro un Array con los id u objetos almacenados de los DOM Elements específicos

Si uno de los elementos de la lista es un contenedor, puede haber consecuencias catastróficas. Para esos caso, recomiendo ampliamente usar el objeto de Opciones Avanzadas e indicar el DOM Elements simples a ignorar

HTML de Ejemplo

<!DOCTYPE html>
<html>
  [...]
  <body>
    <form id="ejemplo">
      <input id="nombres" type="text" name="nombres">
      <input id="apellidos" type="text" name="apellidos">
      <input type="text" name="noLoQuiero">
    </form>
  </body>
</html>

JS de Ejemplo

// Indicando con objetos almacenados:
const miNombres = document.getElementById('nombres')
const miApellidos = document.getElementById('apellidos')

const salvarForm = new FormKeeper([miNombres, miApellidos])

// Indicando los id de nuestros form:
const salvarForm = new FormKeeper(['nombres', 'apellidos']) // <- Yo certifico este método 👌👍

Objeto de Opciones Avanzadas

El guardar y restaurar datos guardados puede ser tan complejo como el desarrollador quiera, por lo cual una característica experimental es la personalización de los eventos con un objeto.

HTML de Ejemplo

<!DOCTYPE html>
<html>
  [...]
  <body>
    <form id="ejemplo">
      <input id="nombres" type="text" name="nombres">
      <input id="apellidos" type="text" name="apellidos">
    </form>
  </body>
</html>

JS de Ejemplo

// Indicando un objeto almacenado:
const miForm = document.getElementById('ejemplo')

const opcionesFK = { domEl: miForm }

const salvarForm = new FormKeeper(opcionesFK)

// Indicando el id de nuestro form:
const opcionesFK = { domEl: 'ejemplo' } // <- Yo certifico este método 👌👍

const salvarForm = new FormKeeper(opcionesFK) // <- Y con todo y esto 👌👍

.domEl Admite al igual que como es indicado por parámetro, un contenedor un elemento específico o una lista de elementos específicos.

Opciones Avanzadas

Opción	Valores Aceptados	Valor por Defecto	Explicación
.domEl	String / Array / Object / Variable	null	Puede ser el DOM Element contenedor, el DOM Element específico, o una lista de los DOM Elements específicos.
.domEls	Array	[]	PELIGROSO: Es el lugar donde se almacenan los DOM Elements con los que se va a trabajar. Para indicar una lista, fijar un Array en .domEl.
.ignorarDomEls	Array	[]	Lista de DOM Elements que serán ignorados durante el proceso de guardado y de restauración. Esto claro, en caso que .domEl fuera un contenedor.
.ignorarTipos	Array	['submit', 'reset', 'button', 'file', 'image']	PELIGROSO: Es la lista donde se almacenan los tipos de input que no es posible entenderse hasta el momento, por favor, a menos que sepa lo que hace, no lo cambie.
.elementos	Array	['INPUT', 'SELECT', 'TEXTAREA', 'DATALIST']	PELIGROSO: Es la lista de tagNames que FormKeeper entiende y puede procesar a la perfección. Por favor, a menos que sepa lo que hace, no lo cambie.
.ignorarElementos	Array	[]	Lista de los tagNames que se van a ignorar durante el proceso de ejecución.
.encriptado	Boolean	true	Opción que define si el guardado y la restauración de datos se hace de forma encriptada. El valor de este método tiene prioridad por sobre el valor en el segundo parámetro de FormKeeper()
.restaurarDefault	Boolean	false	Opción que define si al cargar la librería los elementos se restauran automáticamente.
.restaurarCallback	Function	() => { console.log('Elementos restaurados con éxito.') }	Es la función callback por defecto que se ejecuta después de restaurar los elementos.
.limpiarCallback	Function	() => { console.log('FormKeeper limpiado con éxito.') }	Es la función callback por defecto que se ejecuta después de limpiar los elementos.

Ejemplo

const opcionesFK = {
  domEl: 'ejemplo',
  ignorarDomEls: ['nombres'],
  encriptado: true,
  restaurarDefault: true,
  restaurarCallback: () => {
    alert('Sus datos están a salvo gracias a FormKeeper')
  },
  limpiarCallback: () => {
    alert('Todo limpio ahora')
  }
}

const salvarForm = new FormKeeper(opcionesFK)

API

FormKeeper.prototype.restaurar( [callback] )

Método para restaurar los elementos en un momento determinado.

OPCIONAL: Por parámetro se le puede asignar un callback personalizado.

Ejemplo

// En caso de tener un botón flotante que pueda restaurar la información, si es que existe.
const saveTheForm = new FormKeeper()

if (saveTheForm.guardados() > 0) {
  $('#myFloatBtn').fadeIn('400').click(function() {
    saveTheForm.restaurar(() => {
      alert('Su información no se perdió gracias a FormKeeper')
    })
  })
}

FormKeeper.prototype.limpiar( [callback, confirmación] )

Método para limpiar los datos guardados de la instancia específica.

OPCIONAL: Por el primer parámetro, se le puede asignar un callback personalizado.

OPCIONAL: Por el segundo parámetro, mediante un Boleano, se activa o desactiva una confirmación para limpiar los datos de la instancia. Por defecto, el valor es true. También, se puede optar por asignar un String con la frase de confirmación que deseé.

Ejemplo

// En caso de usar jQuery para escuchar eventos y borrar la información del form en cuestión
const saveTheForm = new FormKeeper()

$('#myForm').submit(function() {
  [...]

  saveTheForm.limpiar(() => {
    console.log('FormKeeper limpiado.')
  }, '¿Listo para borrar la información?')
})

FormKeeper.limpiar( [callback, confirmación] )

Método estático para limpiar los datos guardados de todo FormKeeper. Limpia por igual información que fue encriptada, como la que no.

OPCIONAL: Por el primer parámetro, se le puede asignar un callback personalizado.

Ejemplo

// En caso de colocar un botón y escucharlo con jQuery para eliminar toda la información.
$('#myButton').click(function() {
  FormKeeper.limpiar(() => {
    console.log('FormKeeper limpiado.')
  }, '¿Listo para borrar la información?')
})

FormKeeper.prototype.guardados()

Método para conocer la cantidad de información guardada por la instancia.

Ejemplo

// En caso de tener un botón flotante que pueda restaurar la información, si es que existe.
const saveTheForm = new FormKeeper()

if (saveTheForm.guardados() > 0) {
  $('#myFloatBtn').fadeIn('400').click(function() {
    saveTheForm.restaurar(() => {
      alert('Su información no se perdió gracias a FormKeeper')
    })
  })
}

FormKeeper.saveValue(index, domElValue, identificador, encriptado)

Método estático usado para salvar los datos que nos son inputs de tipo radio

FormKeeper.saveRadio(index, domElValue, identificador, encriptado, info)

Método estático usado para salvar los datos que son inputs de tipo radio

Compatibilidad

Actualmente, FormKeeper puede entender, salvar y restaurar los siguientes DOM Elements:

<datalist>
<input type="checkbox">
<input type="color">
<input type="date">
<input type="datetime-local">
<input type="email">
<input type="hidden">
<input type="month">
<input type="number">
<input type="password">
<input type="radio">
<input type="range">
<input type="search">
<input type="tel">
<input type="text">
<input type="time">
<input type="url">
<input type="week">
<select>
<textarea>

Para futuras versiones

Es enero del 2017. Los propósitos para este año, por lo menos, siguen siendo:

Método para limpiar el localStorage de una instancia específica.
Método estático para limpiar el localStorage de cualquier información generada por FormKeeper.
Callback después de ejecutar algún método de limpieza
Ejemplo más bonito (hahaha) e interactivo.
Capacidad de desactivar y activar autoguardado de Datos.
Método para guardar Datos de forma manual.
Callback después de ejecutar algún método de guardado de datos.
Soporte para entender, salvar y restaurar contenteditable Attribute.
Agregar soporte para ignorar por selectores.
Agregar los recursos usados en el README.
Tener traducciones para distintos idiomas de la documentación.
Invitar a mucha gente para contribuir y también para que lo apliquen a su proyecto.
Listar los sitios que usan FormKeeper en el README.
Inspirar a más programadores a seguir mejorando internet.
Restauración independiente de datos.