Almacenar información Local con la API Web Storage de HTML5.

Tutoriales

Si bien es cierto la versión actual de HTML5 que ahora conocemos ha tenido muchos cambios en comparación con la versión antigua ahora podemos guardar información local en el navegador con una nueva API que trae HTML5  denominada Web Storage, a continuación explicare de una manera sencilla como usar esta API.

Antes que nada creare una carpeta Blog donde almacenaré todo los archivos correspondientes.

 • Después de haber creado mi carpeta crearé un archivo llamado home.html donde crearé la vista con relaciones a 02 archivos externos (CSS y JavaScript).

 • Ahora dentro de la carpeta Blog, creare una carpeta JS la cual contendrá un archivo llamado code.js y procederemos a codificar.

NOTA: Hay dos maneras de guardar la información con Web Storage, las cuales    son:

  1. sessionStorage: con este método podremos guardar la data temporalmente; es decir solamente cuando la ventana del navegador se encuentre activa, podremos añadir información usándola de la siguiente manera:

Y podremos leer de la siguiente manera:  

  1. localStorage: con este método podremos guardar la data permanente; es decir incluso cuando el navegador se cierre la data aun estará disponible, de igual manera podremos añadir información usándola de la siguiente manera:

Y podremos leer de la siguiente manera: 

• La vista está quedando de esta manera:

7

(para ver la imagen nitida haz click sobre ella)

  • Los resultados irían quedando de esta manera:

8

(para ver la imagen nitida haz click sobre ella)

• Como se podrán dar cuenta he añadido un botón general “DeleteAll” que al pulsarlo borraría todo mi contenido, y también un botón “Delete” para cada ítem ingresado claro que al pulsar estos botones se ejecutara una función para cada botón:

  • Bueno eso sería todo espero que les sirva recuerden que esto solamente funciona en la pestaña actual del navegador, en caso lo cierren y vuelvan abrir esto no funcionara ya que estamos usando el método sessionStorage si deseas que la información aun este activa aun cerrando el navegador deberás utilizas el método localStorage.
  • Puedes descargar el código en nuestro GitHub.

Sigueme en Twitter @jccisnerosp

Newsletter

Suscríbete a Nuestro Boletín de Novedades:

(Luego de la suscripción no te va salir ningun mensaje. Solo revisa tu bandeja de Correo para confirmar tu suscripción)
* indicates required