Tutorial de JavaScript – Lista To-Do usando WebSql

Html5 trajo consigo muchas APIs, las cuales mediante su implementacion, ayudan a solucionar  muchos problemas. Dentro de estas nuevas bondades se encuentran los diferentes tipos de almacenamiento local, los cuales permiten guardar una limitada cantidad de información dependiendo de el dispositivo, navegador, y el api. Estas son:

  • LocalStorage
  • SessionStorage
  • WebSQL Database
  • Indexed Database
  • FileSystem API
  • Application Cache

De todas estas, la cual vamos a trabajar es WebSql. Aunque no tenga soporte desde el 10 de noviembre del 2010, todavía hay navegadores que soportan el uso de esta.  También, si se quiere saber cual es el tamaño en bytes de una cantidad de datos aproximado que se vaya a guardar, se puede recurrir a la siguiente herramienta, Browser Storage Abuser

wsql

  • IE (No)
  • Edge (No)
  • Firefox (No)
  • Chrome (Si, versiones 31 -49)
  • Safari (Si, versiones 8 – 9)
  • Opera (Si, versiones 34  – 32)
  • Chrome para android (Si, versión 45)
  • Opera mini (No)
  • iOS Safari (Si, versiones 8.4 – 9)

Como ya se había dicho, también depende del dispositivo la capacidad de almacenamiento, tanto en móviles como en escritorio, lo máximo  que se puede almacenar es 50mb, pero claro esto puede aumentar si es en móvil o escritorio, y también dependiendo del navegador. Bueno sin mas preámbulo, a desarrollar el ejemplo.

Lo primero que debemos hacer, es abrir nuestro IDE o el editor de código que usen. Yo usare el framework materializecss para darle un poco de estilo al ejemplo, ustedes pueden usar el que deseen. En cuanto al navegador recomiendo chrome.

Bueno primero, creare el diseño de manera rápida, no se preocupen por el código, facilitare todo para descargar y verlo funcionando en cualquier equipo.

1

Luego de que se coloque el estilo que cada quien quiera, le damos click derecho sobre nuestro navegador, en mi caso chrome, y le damos a la opción inspeccionar elemento, y luego damos click izquierdo sobre esta; para después dirigirnos a la opción Resources.

2 - señalando

En la imagen anterior, podemos ver dentro de los diferentes tipos de almacenamientos el Web SQL, sobre el cual estamos hablando y vamos a desarrollar nuestra aplicación.

Después de haber creado, los archivos los cuales vamos a necesitar, en nuestro archivo javascript principal, colocamos lo siguiente:

En el código anterior, podemos ver como creamos la base de datos en al función CrearDB, consta de un nombre corto, de una version, un nombre corto, y el tamaño, el que se ve en el ejemplo es de 50mb.

Luego la función siguiente, vemos como se crea la tabla a utilizar, en este caso le puse el nombre de Tareas a la tabla, si necesitan utilizar mas tablas el proceso es el mismo, recomiendo que el string sea siempre asignado a una variable para nunca mezclar estos a mitad del código.

3 - creacion db y tablas

En la imagen anterior vemos dentro de el rectángulo rojo, la base creada y la tabla, solo se necesita llamar la función de crear la tabla, debido que la función de crear la base de datos retorna a esta, para que podamos llamarla e cualquier momento que necesitamos abrir la base de datos, ya sea para crear, guardar o eliminar. El código es el siguiente:

Ahora llego la hora de crear la función de insertar y eliminar

En las funciones anteriores, se puede ver, como insertamos, a la hora de insertar el numero de signos de interrogación que se colocan en VALUES, deben ser la misma cantidad de los campos de la tabla en este caso son dos campos, entonces son dos signos de interrogación.

También en el momento de insertar, yo decidí peguntar, si ya existían tareas, para guardar auto incrementando la llave primaria, que en este caso, llame el campo fila, lo que hago es sumar el numero de filas mas una unidad.

Luego al momento de agregar la tarea a la lista en el documento HTML, utilizo la api data-fila, la propiedad data-* , y nos permite guardar datos en una variable dentro de alguna etiqueta, esto nos ayuda a tener referencias sobre el mismo documento. Esta propiedad se utiliza en este caso, para eliminar directamente guardando la llave primaria de cada tarea en el botón que nos aparece al lado de la tarea.

4

En la imagen anterior, se pueden ver tres rectángulos, el rojo encierra el mensaje de error, si se intenta registrar una tarea, pero al darle click no hay nada en el campo, el purpura o morado, es donde escribimos nuestra tarea y la guardamos, y en el azul nos cargara la lista de tareas que hallamos registrado en nuestra base de datos.

5

En la imagen anterior a este párrafo, podrán ver el mensaje de guardado con éxito al registrar la tarea, y la tarea en la lista al lado.

6

En la ultima imagen, podemos ver el mensaje cuando eliminamos una tarea, y la consulta automática ya previamente realizada para cargar la o las tareas aun que estén guardadas en la base de datos.

Bueno eso es todo, si alguna consulta no duden en escribir algún comentario, también dejare el proyecto para descargar desde GitHub.

Enlace del proyecto: Lista To-Do

Publicado por

Pedro Pimienta

Soy de Colombia, tengo 25 años, estudiante de ingeniería de sistemas, escritor y buen lector, soy buen oyente y capaz de encontrar la solución a cualquier problema que se presente.

Share this article

Agregar un comentario