¿Qué es y cómo utilizar localStorage y sessionStorage?

El objeto Storage (API de almacenamiento web) nos permite almacenar datos de manera local en el navegador y sin necesidad de realizar alguna conexión a una base de datos. En este artículo te mostraré cómo utilizarlo mediante JavaScript.

localStorage y sessionStorage: ¿qué son?

localStorage y sessionStorage son propiedades que acceden al objeto Storage y tienen la función de almacenar datos de manera local, la diferencia entre éstas dos es que localStorage almacena la información de forma indefinida o hasta que se decida limpiar los datos del navegador y sessionStorage almacena información mientras la pestaña donde se esté utilizando siga abierta, una vez cerrada, la información se elimina.

Validar objeto Storage en el navegador

Aunque gran parte de los navegadores hoy en día son compatibles con el objeto Storage, no está de más hacer una pequeña validación para rectificar que realmente podemos utilizar dicho objeto, para ello utilizaremos el siguiente código:

1if (typeof(Storage) !== 'undefined') {
2  // Código cuando Storage es compatible
3} else {
4 // Código cuando Storage NO es compatible
5}
6

Guardar datos en Storage

Existen dos formas de guardar datos en Storage, que son las siguientes:

localStorage

1// Opción 1 ->  localStorage.setItem(name, content)
2// Opción 2 ->localStorage.name = content
3// name = nombre del elemento
4// content = Contenido del elemento
5
6localStorage.setItem('Nombre', 'Miguel Antonio')
7localStorage.Apellido = 'Márquez Montoya'
8

sessionStorage

1// Opción 1 ->  sessionStorage.setItem(name, content)
2// Opción 2 ->sessionStorage.name = content
3// name = nombre del elemento
4// content = Contenido del elemento
5
6sessionStorage.setItem('Nombre', 'Miguel Antonio')
7sessionStorage.Apellido = 'Márquez Montoya'
8

Recuperar datos de Storage

Al igual que para agregar información, para recuperarla tenemos dos maneras de hacerlo

localStorage

1// Opción 1 -> localStorage.getItem(name, content)
2// Opción 2 -> localStorage.name
3
4// Obtenemos los datos y los almacenamos en variables
5let firstName = localStorage.getItem('Nombre'),
6    lastName  = localStorage.Apellido
7
8console.log(`Hola, mi nombre es ${firstName} ${lastName}`)
9// Imprime: Hola, mi nombre es Miguel Antonio Márquez Montoya
10

sessionStorage

1// Opción 1 -> sessionStorage.getItem(name, content)
2// Opción 2 -> sessionStorage.name
3
4// Obtenemos los datos y los almacenamos en variables
5let firstName = sessionStorage.getItem('Nombre'),
6    lastName  = sessionStorage.Apellido
7
8console.log(`Hola, mi nombre es ${firstName} ${lastName}`)
9// Imprime: Hola, mi nombre es Miguel Antonio Márquez Montoya
10

Eliminar datos de Storage

Para eliminar un elemento dentro de Storage haremos lo siguiente:

localStorage

1// localStorage.removeItem(name)
2localStorage.removeItem(Apellido)
3

sessionStorage

1// sessionStorage.removeItem(name)
2sessionStorage.removeItem(Apellido)
3

Limpiar todo el Storage

Ya para finalizar veremos la forma para eliminar todos los datos del Storage y dejarlo completamente limpio

localStorage

1localStorage.clear()
2

sessionStorage

1sessionStorage.clear()
2

Después de leer este artículo tienes los conocimientos suficientes para manejar datos de manera local, depende de ti cuánta creatividad le pones para sacarle el mayor de los provechos posible.