JavaScript (a menudo abreviado como JS) es uno de los pilares de la infraestructura web moderna. Es un lenguaje de programación orientado a objetos, interpretado y ligero que admite funciones de primera clase. JavaScript es conocido principalmente por su implementación en páginas web dinámicas. Sin embargo, debido a sus características, JavaScript también se utiliza en entornos fuera del navegador.
En esta guía, analizaremos en detalle dos objetos JavaScript: localStorage y sessionStorage.
Descripción general de localStorage y sessionStorage
Los objetos localStorage y sessionStorage se ofrecen como parte de la API de almacenamiento web. Es una excelente herramienta para el almacenamiento local de pares clave-valor. El uso de localStorage y sessionStorage es una excelente alternativa a las cookies. Este enfoque ofrece algunos beneficios adicionales:
- Los datos se almacenan localmente y el servidor no puede leerlos. Esto elimina los problemas de seguridad de las cookies.
- Permite una mayor capacidad de almacenamiento (hasta 10 MB para la mayoría de los navegadores modernos).
- Sintaxis simple y directa.
Estos objetos son compatibles con todos los navegadores web modernos, por lo que no habrá problemas de compatibilidad. Las cookies siguen siendo útiles en muchas situaciones, por ejemplo, para la autenticación. Sin embargo, existen situaciones en las que localStorage y sessionStorage ofrecen mejores soluciones.
Requisitos previos
Para realizar los pasos que se muestran en este tutorial, necesitará los siguientes componentes:
- Un servidor Linux configurado correctamente. Esta guía demuestra cómo configurar su propio servidor Ubuntu en CloudSigma.
- Node.js como entorno de ejecución de JavaScript. Obtenga más información sobre cómo instalar Node.js en Ubuntu aquí.
- Un navegador web moderno, por ejemplo, Google Chrome o Firefox.
Para la demostración, tomamos una página web de muestra que tiene adjunto un script de JS. Puede obtener más información sobre cómo agregar JavaScript a un archivo HTML aquí:
En cuanto al editor de texto, utilizaremos Visual Studio Code:
¿Cuál es la diferencia entre localStorage y sessionStorage?
Tanto localStorage como sessionStorage se originan en la misma API. Sus comportamientos también son idénticos. La única diferencia radica en la forma en que cada objeto permite la persistencia de datos. En el caso de sessionStorage, los datos persisten hasta que se cierra la ventana o pestaña. Con localStorage, los datos persisten hasta que se borra la caché del navegador o la aplicación web los elimina.
En este tutorial, nos centraremos principalmente en localStorage. Sin embargo, la sintaxis para sessionStorage es la misma. Mostraremos cómo crear, leer y actualizar pares clave/valor utilizando localStorage.
Paso 1 – Creación de entradas
Podemos declarar una entrada en el objeto localStorage utilizando setItem(). Este método toma dos argumentos: la clave y su valor correspondiente. La estructura del método es la siguiente:
|
1 |
localStorage.setItem(<key>, <value>) |
En el siguiente ejemplo, creamos una variable key. Utilizando el método setItem(), hemos establecido una nueva key y establecido su valor en ‘value’:
|
1 2 |
let key = 'item_1'; localStorage.setItem(key, 'value'); |
Paso 2 – Lectura de entradas
Ahora, ¿cómo leemos el valor almacenado en la clave? Para obtener una clave de localStorage, utilizaremos el método getItem(). Toma el nombre de la clave y devuelve los valores almacenados en ella. Utilizaremos el método alert() para mostrar el contenido que recuperamos:
|
1 2 |
let myItem = localStorage.getItem(key); alert(myItem); |
A continuación, abra la página web en un navegador web. Debería mostrar el valor almacenado en la key:
Paso 3 – Actualización de entradas
Una vez que se establece un valor, permanecerá así a menos que se cambie. Si volvemos a utilizar el método setItem() en la misma key de nuevo, reemplazará automáticamente el valor antiguo por el nuevo.
En el siguiente ejemplo, la key se inicializa primero con el valor ‘value’. En la siguiente línea, hemos llamado a setItem() una vez más y establecido el valor en ‘nuevo valor’:
|
1 2 3 4 5 |
let key = 'item_1'; localStorage.setItem(key, 'value'); localStorage.setItem(key, 'new value'); let myItem = localStorage.getItem(key); alert(myItem); |
Veamos qué ocurre cuando ejecutamos este código en el navegador:
Como podemos ver, el valor de la clave se establece en ‘nuevo valor’.
Paso 4 – Eliminar entradas
Si hay múltiples entradas en el localStorage (y sessionStorage también) que ya no sean necesarias, se recomienda borrarlas después. Esto libera más espacio para un uso posterior. La aplicación también se vuelve más eficiente en el uso de memoria.
Para eliminar una entrada de localStorage, existe un método dedicado removeItem(). Toma la clave como argumento y la elimina del localStorage conjunto de datos:
|
1 |
localStorage.removeItem(<key_to_remove>) |
Implementémoslo en nuestro script:
|
1 2 3 4 5 |
let key = 'item_1'; localStorage.setItem(key, 'value'); localStorage.removeItem(key); let myItem = localStorage.getItem(key); alert(myItem); |
Al ejecutarlo, la salida dice null porque no existe ningún valor para la clave:
Paso 5 – Vaciar entradas
En el ejemplo anterior, eliminamos solo una clave. Sin embargo, localStorage permite borrar todos los elementos almacenados en un solo paso. Para borrar todas las entradas, localStorage ofrece el método clear(). No toma ningún argumento:
|
1 |
localStorage.clear(); |
Pongamos el método en acción:
|
1 2 3 4 5 |
let key = 'item_1'; localStorage.setItem(key, 'value'); localStorage.clear(); let myItem = localStorage.getItem(key); alert(myItem); |
Al igual que antes, elimina todas las entradas de localStorage, por lo que al intentar acceder al valor de la clave, devuelve null:
Paso 6 – Trabajar con JSON
-
Almacenar objetos y arreglos
Los objetos localStorage y sessionStorage solo pueden almacenar valores de cadena. Sin embargo, habrá ocasiones en las que tendrás que trabajar con objetos o arreglos. En ese caso, necesitamos convertirlos en una cadena.
JavaScript viene con la función JSON.stringify() que tomará el arreglo/objeto y lo convertirá en cadenas. Esta publicación ofrece una visión general rápida del formato JSON. Para una guía más detallada, puedes leer JSON en JavaScript.
En este ejemplo, creamos un objeto sampleObj con dos campos name y location. Lo convertiremos en una cadena y lo almacenaremos en la clave:
|
1 2 3 4 5 |
let key = 'item_1'; let sampleObj = { name: "Jason", location: "Sweden" }; localStorage.setItem(key, JSON.stringify(sampleObj)); let myItem = localStorage.getItem(key); alert(myItem); |
Aquí, la salida será la cadena que contiene los datos del objeto:
-
Leer objetos y arreglos
Al almacenar, convertimos objetos y arreglos en cadenas. También podemos tomar esta cadena y volver a convertirla a su formato original. Para hacerlo, utilizaremos el método JSON.parse(). Toma una cadena y la vuelve a convertir al formato JSON:
|
1 2 3 4 5 |
let key = 'item_1'; let sampleObj = { name: "Jason", location: "Sweden" }; localStorage.setItem(key, JSON.stringify(sampleObj)); let myItem = JSON.parse(localStorage.getItem(key)); alert(JSON.stringify(myItem, null, " ")); |
En cuanto a la salida, la volvimos a convertir en una cadena y le dimos formato para una mejor visualización:
Paso 7 – Comprobar si hay un elemento en localStorage
En esta sección, mostraremos una prueba sencilla para determinar si localStorage y sessionStorage contienen algún elemento o no. Usando una simple if sentencia, podemos comprobar la longitud de localStorage o sessionStorage. Si hay elementos, la longitud será mayor que 0.
Primero, implementa el siguiente ejemplo:
|
1 2 3 4 5 6 7 8 |
let key = 'item_1'; localStorage.setItem(key, 'new_value'); if(localStorage.length > 0){ alert('true'); } else{ alert('false'); } |
Aquí, la salida será ‘true’ porque existe una clave en localStorage:
Step 8 – Iterating Over Items
El localStorage y sessionStorage almacena las claves en una estructura similar a un array. No admiten el método forEach , por lo que tendremos que seguir la técnica clásica de usar un bucle for para iterar sobre cada elemento.
En el siguiente ejemplo, comprobaremos si localStorage está vacío o no. Si no está vacío, entonces iteraremos sobre cada elemento:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
let key = 'item_1'; localStorage.setItem(key, 'new_value'); if(localStorage.length > 0){ for(i = 0; i < localStorage.length; i++){ let key = localStorage.key(i); let myItem = localStorage.getItem(key); alert(key); } } else{ alert('false'); } |
La salida mostrará todos los elementos uno por uno:
Paso 9 – Comprobar el soporte del navegador
Podemos comprobar el soporte para localStorage (y sessionStorage) comprobando si está disponible en el objeto window. Una simple sentencia if será suficiente:
|
1 2 3 4 5 6 |
if(window.localStorage){ alert(true); } else{ alert(false); } |
Ejecuta el código en el navegador web:
Reflexiones finales
Esta guía demostró cómo usar los objetos localStorage y sessionStorage en JavaScript para almacenar pares clave/valor en el navegador. Las sintaxis son mucho más sencillas de utilizar. Mostramos cómo crear, eliminar y actualizar pares clave/valor. También abordamos el almacenamiento de objetos y arrays convirtiéndolos en cadenas (y viceversa).
Para profundizar aún más tus conocimientos de JavaScript, puedes consultar los siguientes tutoriales de nuestro blog:
- Conceptos básicos de JavaScript: cómo trabajar con fecha y hora
- JavaScript: un tutorial sobre cómo indexar, dividir y manipular cadenas
- Trabajar con JavaScript: cómo funcionan las clases
- Trabajar con JavaScript: cómo funcionan los prototipos y las herencias
¡Feliz programación!
Comentarios
Aún no hay comentarios. Sea el primero.