API de almacenamiento web

Tabla de contenido

    Mostrar tabla de contenidos

La API de almacenamiento web es una sintaxis simple para almacenar y recuperar datos en el navegador. Es muy fácil de usar:

Ejemplo

localStorage.setItem("name", "John Doe");
localStorage.getItem("name");

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<script>
localStorage.setItem("name","John Doe");
document.getElementById("demo").innerHTML = localStorage.getItem("name");
</script>

</body>
</html>

La API de almacenamiento web es compatible con todos los navegadores:

Chrome IE/Edge Firefox Safari Opera
Yes Yes Yes Yes Yes

El objeto de almacenamiento local

El objeto localStorage proporciona acceso a un almacenamiento local para un sitio web en particular. Le permite almacenar, leer, agregar, modificar y eliminar elementos de datos para ese dominio.

Los datos se almacenan sin fecha de caducidad y no se eliminarán al cerrar el navegador.

Los datos estarán disponibles por días, semanas y años.

El método setItem()

El método localStorage.setItem() almacena un elemento de datos en un almacenamiento.

Toma un nombre y un valor como parámetros:

Ejemplo

localStorage.setItem("name", "John Doe");

El método getItem()

El método localStorage.getItem() recupera un elemento de datos del almacenamiento.

Toma un nombre como parámetro:

Ejemplo

localStorage.getItem("name");

El objeto de almacenamiento de sesión

El objeto sessionStorage es idéntico al objeto localStorage.

La diferencia es que el objeto sessionStorage almacena datos para una sesión.

Los datos se eliminan cuando se cierra el navegador.

Ejemplo

sessionStorage.getItem("name");

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<script>
sessionStorage.setItem("name","John Doe");
document.getElementById("demo").innerHTML = sessionStorage.getItem("name");
</script>

</body>
</html>

El método setItem()

El método sessionStorage.setItem() almacena un elemento de datos en un almacenamiento.

Toma un nombre y un valor como parámetros:

Ejemplo

sessionStorage.setItem("name", "John Doe");

El método getItem()

El método sessionStorage.getItem() recupera un elemento de datos del almacenamiento.

Toma un nombre como parámetro:

Ejemplo

sessionStorage.getItem("name");

Propiedades y métodos de objetos de almacenamiento

key(n)

Devuelve el nombre de la nésima clave en el almacenamiento.

length

Devuelve el número de elementos de datos almacenados en el objeto Almacenamiento.

getItem(keyname)

Devuelve el valor del nombre de clave especificado.

setItem(keyname, value)

Agrega una clave al almacenamiento o actualiza un valor de clave (si ya existe)

removeItem(keyname)

Elimina esa clave del almacenamiento.

clear()

Vacíe todas las llaves del almacenamiento.

Páginas relacionadas para la API de almacenamiento web

window.localStorage

Permite guardar pares clave/valor en un navegador web. Almacena los datos sin fecha de caducidad

window.sessionStorage

Permite guardar pares clave/valor en un navegador web. Almacena los datos de uno sesión