Conservar datos en páginas web

Pasar datos entre páginas HTML utilizando parámetros de consulta plantea el problema de la visibilidad de los datos en la URL. Afortunadamente, existen mecanismos alternativos en JavaScript y jQuery para transmitir datos entre páginas.

Aprovechamiento de objetos de almacenamiento HTML5

Para resolver este problema, HTML5 proporciona objetos de almacenamiento como sessionStorage y almacenamiento local. Estos objetos ofrecen un medio para almacenar datos temporal o permanentemente dentro del almacenamiento local del navegador, lo que permite una recuperación conveniente más adelante.

Almacenamiento de sesión

Para almacenamiento temporal de datos dentro de un sesión única del navegador, sessionStorage es ideal. Los datos almacenados en sessionStorage permanecen accesibles hasta que finaliza la sesión (por ejemplo, cuando se cierra la pestaña del navegador).

sessionStorage.setItem('label', 'value');
sessionStorage.getItem('label');

Almacenamiento local

Para un almacenamiento más permanente, localStorage es la solución. Los datos almacenados en localStorage persisten incluso después de cerrar y volver a abrir el navegador.

localStorage.setItem('label', 'value');
localStorage.getItem('label');

Beneficios de los objetos de almacenamiento HTML5

• Los datos permanecen ocultos, lo que evita problemas de visibilidad en la URL.
• Los valores almacenados persisten en varias páginas e incluso después de actualizar el navegador (para almacenamiento local).
• Ideal para almacenar datos de formulario intermedio u otra información esencial que deba compartirse entre páginas.