Tabla de Contenido

SessionStorage en Javascript, al igual que localStorage se encuentan inmersos dentro del objeto Storage como propiedades del mismo, pero ¿qué son y para qué sirven?

Actualmente, los navegadores cuentan con un objeto de almacenamiento o también conocido como objeto Storage (API de almacenamiento web), el cual nos va a permitir almacenar de manera local en el navegador datos son la necesidad de tener que conectarnos a una base de datos o API.

Entonces, podemos inferir que tanto localStorage como sessionStorage en Javascript nos permitirán almacenar información en el navegador para su uso posterior o para poder consumirlo en nuestro flujo de programación.

SessionStorage vs LocalStorage

La principal diferencia entre localStorage y sessionStorage en Javascript es la durabilidad de almacenamiento, es decir, sessionStorage en Javascript tiene la habilidad de poder sobrevivir a las recargas del sitio, sin ser afectado, sin embargo, si se cierra el navegador o la pestaña en donde fue iniciado, se perderá.

Si tienes problemas para detectar cuándo se cierra la pestaña para borrar el sessionStorage manualmente o sincronizar datos con tu backend, revisa nuestra guía de troubleshooting.

LocalStorage Javascript por su parte, puede vivir por tiempo indefinido aún cuando el navegador haya sido reiniciado o hasta que decidamos limpiar la información del navegador

LocalStorage y SessionStorage Javascript Ejemplos

Para poder empezar a utilizar localStorage y sessionStorage en Javascript, es necesario que conozcamos cuales son sus funcionalidades y métodos, por lo que aquí tenemos una lista de ellos que iremos explicando paso a paso.

  1. setItem()
  2. getItem()
  3. removeItem()
  4. clear()
  5. key()
  6. length()

Es importante mencionarte que todos estos métodos están disponibles tanto para localStorage como para sessionStorage en Javascript, por lo que los ejemplos que se mencionan aquí, aplican para ambos casos

sessionStorage setItem

Empezaremos con setItem, el cual nos permite almacenar datos en el Storage, setItem sessionStorage setItem recibe dos parámetros, los cuales son la clave y el valor que estamos intentando almacenar, de forma que en código quedaría de la siguiente manera:

sessionStorage.setItem('name', '8dev')
sessionStorage.setItem('type', 'Site')

JavaScript

Como puedes observar en el ejemplo, estamos asignando dos claves al sessionStorage en Javascript, el primero, mediante la clave name y el segundo mediante la clave type, sin embargo, es importante mencionarte que existe otra forma de poder asignar los valores y es con la sintaxis de objeto, veamos el mismo ejemplo:

sessionStorage.name = '8dev'
sessionStorage.type = 'Site'

JavaScript

Ya sea mediante sessionStorage setItem o con la sintaxis de Objeto, podemos almacenar datos dentro del objeto Storage.

Antes de pasar al siguiente punto, es super importante que tengamos en consideración que tanto la clave como el valor deberán ser de tipo string, por lo que si lo que queremos almacenar es un objeto, tendremos que utilizar el método Stringify de JSON para poder almacenar dicho objeto, ejemplo:

sessionStorage.setItem('user', JSON.stringify({name: "8dev", type: "Site"}))

JavaScript

En este caso se está definiendo un objeto user con dos elementos dentro del sessionStorage, el primero sería name y el segundo type, por lo que para poder acceder a el primero debemos obtener el objeto user y después parsearlo con el método JSON.parse()

sessionStorage getItem

sessionStorage getItem, como su nombre indica, nos permitirá acceder u obtener el elemento del objeto Storage, para ello, recibe como único parámetro la clave, esto quiere decir que si intentamos recuperar cualquiera de las dos propiedades de arriba, sería algo como esto:

sessionStorage.getItem('name')
sessionStorage.getItem('type')

JavaScript

Al igual que con sessionStorage setItem, también tenemos dos formas de poder acceder a los elementos y esto es mediante la sintaxis de objeto, por lo que la segunda forma quedaría como esto:

sessionStorage.name
sessionStorage.type

JavaScript

sessionStorage Remove Item

Para poder eliminar un elemento del objeto Storage, tenemos el método removeItem(clave) que recibe como parámetro la clave del elemento que queremos eliminar, en un ejemplo, tendríamos algo como esto:

sessionStorage.removeItem('type')

JavaScript

En este caso, como podemos observar se remueve el elemento type del sessionStorage, sin embargo, el elemento name del sessionStorage en Javascript, quedaría aún disponible para su ejecución o hasta que decidamos eliminarlo.

sessionStorage Clear

Si lo que queremos es borrar todos los elementos que hayamos almacenado sin necesidad de estar removiendo uno por uno, entonces, podemos hacer uso de sessioStorage Clear, el cuál no recibe parámetros ya que su función será eliminar todos los datos del Storage, por ejemplo:

sessioStorage.clear()

JavaScript

Con esta instrucción tanto la propiedad name como la propiedad type que habíamos almacenado en los ejemplos anteriores se eliminarán completamente del Storage.

sessionStorage Key

Si lo que necesitamos es poder acceder al nombre de las propiedades y no a su valor, podemos utilizar la propiedad key, la cual recibe como parámetro el indice de la propiedad que queramos encontrar, ejemplo:

sessionStorage.key(0)
sessionStorage.key(1)

JavaScript

Si antes de ejecutar esto, utilizamos el método setItem para poder definir la propiedad name y type, entonces name ocupará el índice 0 mientras que type ocupará el índice 1.

sessionStorage Length

La última propiedad que podemos utilizar con sessionStorage en Javascript, será la propiedad length la cual se encarga de contar cuantos elementos tenemos dentro del Storage. siguiendo con el ejemplo del sessionStorage setItem, podemos ejecutar algo como esto:

sessionStorage.length

JavaScript

Lo que retornaría como valor 2, ya que existen la propiedad name y la propiedad type que definimos previamente.

BONUS: Recorrer sessionStorage Javascript

Para poder finalizar, podemos hacer uso de los ciclos de javascript, por ejemplo, for in, para poder recorrer el objeto sessionStorage en Javascript, por ejemplo:

for (x in sessionStorage){
    console.log(sessionStorage[x]);
}

JavaScript

Con el ejemplo anterior, podríamos recorrer todos los elementos que trae el objeto sessionStorage en Javascript mediante un ciclo For In

En resumen

Tenemos varios métodos del objeto Storage del cual podemos hacer uso es importante mencionar que el objeto Storage es específico de Javascript por lo que podríamos utilizar sessionStorage React, por dar un ejemplo, aquí te dejo un resumen completo:

1. Si queremos guardar en el storage

sessionStorage.setItem(clave, valor)

JavaScript

2. Si queremos obtener el valor del Storage

sessionStorage.getItem(clave)

JavaScript

3. Si queremos remover un Item del Storage

sessionStorage.removeItem(clave)

JavaScript

4. Si queremos eliminar todos los elementos del Storage

sessionStorage.clear()

JavaScript

5. Si queremos obtener el nombre de una propiedad

sessionStorage.key(0)

JavaScript

6. y si queremos obtener el tamaño del objeto Storage

sessionStorage.length

JavaScript

Así mismo, te dejo la en este enlace el capítulo anterior, en el cuál hablamos sobre los objetos en Javascript, espero que te guste.