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:
if (typeof(Storage) !== 'undefined') {
// Código cuando Storage es compatible
} else {
// Código cuando Storage NO es compatible
}
Guardar datos en Storage
Existen dos formas de guardar datos en Storage, que son las siguientes:
localStorage
// Opción 1 -> localStorage.setItem(name, content)
// Opción 2 ->localStorage.name = content
// name = nombre del elemento
// content = Contenido del elemento
localStorage.setItem('Nombre', 'Miguel Antonio')
localStorage.Apellido = 'Márquez Montoya'
sessionStorage
// Opción 1 -> sessionStorage.setItem(name, content)
// Opción 2 ->sessionStorage.name = content
// name = nombre del elemento
// content = Contenido del elemento
sessionStorage.setItem('Nombre', 'Miguel Antonio')
sessionStorage.Apellido = 'Márquez Montoya'
Recuperar datos de Storage
Al igual que para agregar información, para recuperarla tenemos dos maneras de hacerlo
localStorage
// Opción 1 -> localStorage.getItem(name, content)
// Opción 2 -> localStorage.name
// Obtenemos los datos y los almacenamos en variables
let firstName = localStorage.getItem('Nombre'),
lastName = localStorage.Apellido
console.log(`Hola, mi nombre es ${firstName} ${lastName}`)
// Imprime: Hola, mi nombre es Miguel Antonio Márquez Montoya
sessionStorage
// Opción 1 -> sessionStorage.getItem(name, content)
// Opción 2 -> sessionStorage.name
// Obtenemos los datos y los almacenamos en variables
let firstName = sessionStorage.getItem('Nombre'),
lastName = sessionStorage.Apellido
console.log(`Hola, mi nombre es ${firstName} ${lastName}`)
// Imprime: Hola, mi nombre es Miguel Antonio Márquez Montoya
Eliminar datos de Storage
Para eliminar un elemento dentro de Storage haremos lo siguiente:
localStorage
// localStorage.removeItem(name)
localStorage.removeItem(Apellido)
sessionStorage
// sessionStorage.removeItem(name)
sessionStorage.removeItem(Apellido)
Limpiar todo el Storage
Ya para finalizar veremos la forma para eliminar todos los datos del Storage y dejarlo completamente limpio
localStorage
localStorage.clear()
sessionStorage
sessionStorage.clear()
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.
