Cómo usar LocalStorage en JavaScript

Original article: How to Use LocalStorage in JavaScript

En estos tiempos del desarrollo web, tener una forma de que la información persista ayuda a que los desarrolladores puedan mejorar el rendimiento y de esta manera crear una mejor experiencia de usuario. Y usar el local storage es una manera eficaz de que la información persista en una aplicación.

En este artículo, vas a aprender que es el local storage y como usarlo en aplicaciones web modernas. También aprenderás tanto las ventajas de usarlo, como sus desventajas.

Contenidos

¿Qué es el Local Storage?
Diferencias entre Local Storage y Session Storage
Cómo usar el Local Storage
Un ejemplo práctico
Cómo ver el Local Storage con DevTools
Beneficios de usar el Local Storage
Limitaciones del Local Storage
Conclusión

¿Qué es el Local Storage?

El local storage es una funcionalidad de los navegadores que permite a los desarrolladores guardar información en el navegador del usuario. Es parte de Web Storage API [API de Almacenamiento Web] junto a session storage.

El local storage funciona tomando información en formato de pares clave-valor y la conserva aun cuando el usuario actualiza la página o cierra la pestaña o el navegador.

Diferencias entre Local Storage y Session Storage

Como mencioné anteriormente, Web Storage API provee a los navegadores actuales de dos funcionalidades importantes para almacenamiento de información: local storage y session storage.

Las principales diferencias entre ambos son la persistencia de la información almacenada y su alcance.

En el local storage la información permanece disponible aun cuando la pestaña o la ventana del navegador se cierra, pero la borra cuando la información está almacenada en session storage.

Además, es posible acceder a la información almacenada en el local storage desde múltiples pestañas o ventanas del navegador, mientras que solo se puede acceder a la información almacenada en session storage desde pestañas o ventanas específicas del navegador porque no se comparte.

Cómo usar el Local Storage

El objeto local storage viene con varios métodos diferentes para poder interactuar con él. Con estos métodos es posible agregar, leer, y borrar información ubicada en el local storage.

Cómo almacenar información en el Local Storage

Para almacenar información en el local storage, se usa en el método setItem(). Este método lleva dos argumentos, un clave y un valor.

localStorage.setItem(key, value)

Si la clave no existe en el local storage, el método setItem() va a crear una nueva clave y asignarle el valor dado. Pero si en el local storage ya existe una clave con el mismo nombre, el valor va a ser reemplazado con el nuevo valor.

Cómo leer información almacenada en el Local Storage

Para recuperar y usar la información del local storage, puedes utilizar el método getItem(). Este método lleva una clave como argumento.

localStorage.getItem(key)

Si la clave existe en el local storage, el método devuelve el valor de esa clave. Caso contrario, devuelve null

Cómo almacenar y leer valores de información complejos en el Local Storage

El local storage solo puede almacenar cadenas de texto. Esto significa que si necesitas almacenar valores como objetos o arrays, lo primero que tienes que hacer es transformar ese valor en una cadena de texto. Esto lo puedes hacer usando el método JSON.stringify().

Ejemplo:

const userObj = {
  username = "Maria",
  email: "maria@mail.com"
}

localStorage.setItem('user', JSON.stringify(userObj))

El método JSON.stringify() convierte al objeto userObj en una cadena de texto antes de enviarlo al local storage.

Si quisieras acceder a la información del local storage, es necesario devolverla a su forma original. Esto lo haces usando el método JSON.parse()

Ejemplo:

const storedUserData = localStorage.getItem('user')

if (storedUserData) {
  const userData = JSON.parse(storedUserData)
  // You can use userData here...
} else {
  console.log('User data not found in local storage')
}

En el ejemplo de arriba, primero chequeamos si hay información para la clave "user" en local storage antes de usar el método JSON.parse(). Esto es importante porque si esa información no existe en el local storage, el método JSON.parse() se aplicará a un valor nulo y que puede resultar en un error.

Cómo borrar información del Local Storage

Hay dos métodos para borrar información del local storage. Uno es el método removeItem() y el otro es el método clear()

El método removeItem() se utiliza cuando quieres borrar un solo ítem del local storage. El método lleva la clave como argumento y borra el correspondiente par clave-valor del local storage.

localStorage.removeItem(key)

Si en vez de borrar un solo par clave-valor quieres borrar toda la información almacenada en el local storage, el local storage tiene un método para eso- el método clear()

localStorage.clear()

El método clear()borra todos los pares clave-valor del local storage para el dominio actual.

Cómo obtener el nombre de una clave en el Local Storage

Si quisieras obtener el nombre de una clave en un índice particular del local storage, puedes usar el método key(). Este método lleva como argumento un número y devuelve el nombre de la clave del índice especificado.

Ejemplo:

localStorage.key(0)

El ejemplo de arriba devuelve el nombre de la clave del índice cero. Si no hay clave en el índice especificado, el método devuelve null.

Un ejemplo práctico

El siguiente código muestra la diferencia entre local storage y session storage.

En este ejemplo, vamos a guardar el nombre del usuario en local storage y la edad en session storage

<!-- HTML --> 
<body>

  <h1 class="userName"></h1>
  <h2 class="userAge"></h2>

  <input type="text" class="name" placeholder="Enter name here"/>
  <button class="saveNameBtn">Save Name</button>
  
  <br />

  <input type="text" class="age" placeholder="Enter age here"/>
  <button class="saveAgeBtn">Save Age</button>
  
</body>

El código incluye dos elementos header. Uno para userNamey el otro para userAge. También incluye dos elementos input para nombre y edad, asociados a un botón que vamos a usar para guardar la información.

Usemos el método querySelector para seleccionar los distintos elementos.

const userNameText = document.querySelector(".userName")
const userAgeText = document.querySelector(".userAge")

const saveNameButton = document.querySelector(".saveNameBtn")
const saveAgeButton = document.querySelector(".saveAgeBtn")

Ejemplo de código para Local Storage

saveNameButton.addEventListener("click", () => {
  const userName = document.querySelector(".name").value
  userNameText.textContent = userName
  localStorage.setItem("name", userName)
})

Primero, obtenemos el valor nombre del input, lo ponemos como el textContent de userNameText y luego usamos el método setItem() del local storage para guardar el valor de userName en el local storage.

Ahora veamos cómo podemos obtener el valor nombre del local storage cuando lo necesitamos.

function displayUserName () {
  const nameFromLocalStorage = localStorage.getItem("name")

  if (nameFromLocalStorage) {
    userNameText.textContent = nameFromLocalStorage
  } else {
    userNameText.textContent = "No name data in local storage"
  }
}

displayUserName()

La función displayUserName obtiene el nameFromLocalStorage usando el método `getItem()`. Si el valor existe en el local storage, lo ponemos como el textContent del elemento userNameText. Si es null o no existe, entonces ponemos la cadena de texto "No hay información de nombres en el local storage" como textContent.

Ejemplo de código for Session Storage

Ahora, hagamos lo mismo para el valor age. La única diferencia es que vamos a usar session storage en vez de local storage.


saveAgeButton.addEventListener("click", () => {
  const userAge = document.querySelector(".age").value
  userAgeText.textContent = userAge
  sessionStorage.setItem("age", userAge)
})

function displayUserAge () {
  const ageFromSessionStorage = sessionStorage.getItem("age")

  if (ageFromSessionStorage) {
    userAgeText.textContent = ageFromSessionStorage
  } else {
    userAgeText.textContent = "No age data in session storage"
  }
}

displayUserAge()

Los métodos setItem y getItem también sirven para session storage.

Demo:

Como puedes ver en el demo de arriba, al cerrar y reabrir la página, el valor name persiste en el local storage. Pero el valor age del session storage se borra una vez que la página se cierra. Intentalo tu mismo con el código de ejemplo en StackBlitz.

Cómo ver el Local Storage con DevTools

Puedes seguir los pasos de abajo para inspeccionar los contenidos del local storage en las herramientas para desarrolladores de tu navegador.

Primero, abre las DevTools. Puedes hacer esto haciendo clic derecho sobre la página y seleccionar "Inspeccionar"

Después, selecciona la pestaña "Aplicación" del panel de DevTools. De acuerdo con tu navegador, el panel puede tener un nombre diferente. Por ejemplo, en Safari y Firefox se llama "Almacenamiento".

STEP-TWO — Demo de como abri el panel "Aplicación" en DevTools.

Busca la sección "Almacenamiento" en la barra del costado que muestra una lista de distintas opciones de almacenamiento web.

Haz clic en "Local Storage" para expandir y ver su contenido.

STEP-THREE — Demo de como abrir la pestaña de local storage en el panel de almcenamiento.

Puedes hacer clic en los distintos elementos para ver el par clave-valor correspondiente.

Beneficios de usar el Local Storage

Los siguientes son algunos de los beneficios que tiene el local storage sobre otros mecanismos de almacenamiento que existen en el mundo del desarrollo actual.

Persistencia de la información: Al usar el local storage, la información almacenada se mantiene incluso cuando el usuario cierra la pestaña o el navegador. Esto es útil para guardar preferencias de usuario, ajustes y otra información importante porque le que ayuda a que el usuario tenga una experiencia sin fricciones.
Acceso sin conexión: Puedes usar el local storage como medio para almacenar información que luego puede ser recuperada aún con internet limitada o sin conexión. Esto hace que sea una herramienta útil para aplicaciones como lectores de noticias, de productividad, y otras, que dependen de almacenar información para posibilitar el uso sin conexión,
Más capacidad para almacenamiento: Comparado con otros medios de almacenamiento, el local storage tiene una capacidad relativamente alta. Por ejemplo, las cookies tienen un límite de 4 kilobytes por dominio, pero el local storage puede almacenar hasta 5 megabytes de información por dominio.

Limitaciones de usar el Local Storage

Almacena solo cadenas de textos: Como vimos más arriba, el local storage solo almacena cadenas. Si bien puedes usar los métodos JSON stringify y parse para trabajar, muchos desarrolladores prefieren no hacerlo, ya que lleva a escribir bloques complejos de código, difíciles de depurar.
Seguridad: La información almacenada en el local storage puede ser susceptible a ataques de vulnerabilidad como el cross-site scripting (XSS). Por eso, debes ser cuidadoso cuando trabajes con información sensible y analizar cuestiones relacionadas con la seguridad. De ser necesario, considera otras alternativas al local storage.
No accesible para usar con web workers: Al ser el local storage parte del objeto Window, está atado al hilo de ejecución principal del sitio web. Esto significa que no puedes utilizar el local storage si corres scripts en segundo plano como web workers.

Conclusión

El local storage es una herramienta de los navegadores actuales que les facilita a los desarrolladores web la tarea almacenar y persistir información entre sesiones de navegación.

Comparado con las cookies, el local storage ofrece mayores capacidades de almacenaje. También, no depende de procesos del lado del servidor, a diferencia de las cookies.

En este artículo, has aprendido sobre cómo usar el local storage. Vimos como almacenar, recuperar y borrar información del local storage. También has aprendido sobre algunos beneficios de usar el local storage para tu proyecto y algunas de sus limitaciones.

¡Gracias por leer y feliz codeo! Para más tutoriales en detalle, puedes suscribirte a mi canal de YouTube.