LocalStorage y SessionStorage en JavaScript

`localStorage` y `sessionStorage` son dos mecanismos que proporciona el navegador para almacenar datos en el lado del cliente. Estos almacenan datos de forma persistente o temporal, respectivamente. Vamos a explorar cómo utilizarlos en JavaScript.

LocalStorage

`localStorage` permite almacenar datos de forma persistente en el navegador. Los datos almacenados en `localStorage` permanecen incluso después de cerrar y volver a abrir el navegador.

Almacenar Datos en LocalStorage

localStorage.setItem('nombre', 'Juan');

Obtener Datos de LocalStorage

const nombre = localStorage.getItem('nombre');

console.log(nombre);  // Imprime 'Juan'

Eliminar Datos de LocalStorage

localStorage.removeItem('nombre');

Limpiar Todo LocalStorage

localStorage.clear();

SessionStorage

`sessionStorage` permite almacenar datos de forma temporal. Los datos almacenados en `sessionStorage` se eliminan cuando se cierra la pestaña o ventana.

Almacenar Datos en SessionStorage

sessionStorage.setItem('edad', '30');

Obtener Datos de SessionStorage

const edad = sessionStorage.getItem('edad');

console.log(edad);  // Imprime '30'

Eliminar Datos de SessionStorage

sessionStorage.removeItem('edad');

Limpiar Todo SessionStorage

sessionStorage.clear();

Comprobación de Soporte

Antes de utilizar `localStorage` o `sessionStorage`, es importante verificar si el navegador los soporta.

if (typeof(Storage) !== 'undefined') {

    // Soporta localStorage y sessionStorage

    // Puedes usar localStorage y sessionStorage aquí

} else {

    // No soporta localStorage y sessionStorage

}

Uso Práctico

Los almacenamientos local y de sesión son útiles para guardar preferencias de usuario, estado de la aplicación, información de inicio de sesión, entre otros datos relevantes para la experiencia del usuario.

Estos son los conceptos básicos para almacenar datos en el navegador usando `localStorage` y `sessionStorage` en JavaScript. Utiliza estos mecanismos según tus necesidades para mejorar la experiencia del usuario en tu aplicación web. ¡Sigue practicando y experimentando para mejorar tus habilidades en JavaScript!