Escribir datos en un archivo en JavaScript
- Almacenar datos en el lado del cliente mediante la API de almacenamiento web HTML 5
- Eliminar datos de almacenamiento web para almacenamiento local
La API de almacenamiento web HTML5 nos permite almacenar datos localmente en el lado del cliente. Tenga en cuenta que solo una pequeña cantidad de datos se puede almacenar localmente en el lado del cliente, y su tamaño máximo debe ser menor o igual a 5 MB.
Los datos no se reenvían ni se devuelven al servidor en un momento dado si utiliza la API de almacenamiento web. Siempre estará disponible localmente dentro de un archivo.
Almacenar datos en el lado del cliente mediante la API de almacenamiento web HTML 5
Generalmente, existen dos tipos de objetos de almacenamiento web HTML para almacenar datos en el lado del cliente.
- Almacenamiento local (
window.localStorage)
En el almacenamiento local, los datos siempre estarán disponibles en cualquier momento, incluso después de que se cierre la ventana del navegador. Este tipo no es aplicable cuando el usuario visualiza la página web en modo incógnito (navegación privada). En este caso, los datos se borrarán poco después de que se cierre la última ventana privada.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="company_name"></div>
<script>
localStorage.setItem('company', 'Google');
const storedValue = localStorage.getItem('company');
let company_name = document.getElementById("company_name");
company_name.innerHTML = storedValue;
</script>
</body>
</html>
Primero, tenemos un elemento div vacío con un id de company_name. Dentro de este elemento div, mostraremos el valor, que almacenaremos dentro del almacenamiento local.
Para insertar cualquier valor dentro de localStorage, tenemos que pasar el valor en forma de par clave-valor. Puede realizar este proceso utilizando el método setItem, proporcionado por el almacenamiento local. En este caso, empresa es la clave y Google es el valor. El método setItem no devolverá nada; simplemente almacenará el valor dentro del almacenamiento local.
Para recuperar el valor, el almacenamiento local nos proporciona el método getItem() que toma la clave del valor que desea obtener como argumento. Luego, almacenamos los resultados en la variable llamada valor almacenado. En este punto, tenemos el valor Google dentro del valor almacenado, y lo único que tenemos que hacer es mostrar este valor dentro de la etiqueta div.
Para hacer esto, primero tenemos que obtener el elemento div con la ayuda de su atributo id usando el método document.getElementById y almacenar ese elemento HTML dentro de una nueva variable llamada company_name.
Finalmente, agregaremos el valor presente dentro de la variable storedValue al elemento div con la ayuda de la propiedad innerHTML como company_name.innerHTML = storedValue.
- Almacenamiento de sesión (
window.sessionStorage)
Siempre que utilice el almacenamiento de la sesión para almacenar los datos, los datos estarán disponibles hasta que se abra la pestaña del navegador y se borrarán cuando finalice la sesión de la página.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="company_name"></div>
<script>
sessionStorage.setItem('company', 'Google');
const storedValue = sessionStorage.getItem('company');
let company_name = document.getElementById("company_name");
company_name.innerHTML = storedValue;
</script>
</body>
</html>
Aquí, el código es completamente similar al de Local Storage. La única diferencia es que en lugar de localStorage, hemos utilizado sessionStorage. En primer lugar, el valor Google se almacenará dentro de sessionStorage. Se puede acceder a este valor más tarde simplemente pasando la clave asociada con el valor al método getItem(). Luego, almacenamos este valor dentro de la variable storedValue. Al final, estamos agregando este valor a div, que mostrará el valor en la pantalla.
Todos los navegadores modernos admiten ambos tipos.
Eliminar datos de almacenamiento web para almacenamiento local
Como ya hemos visto, el almacenamiento de la sesión borra todos los datos en cuanto se cierra la pestaña del navegador o todo el navegador. Pero, ¿qué sucede si también desea eliminar los datos locales por razones de seguridad o necesidades personales? También hay una forma de hacer esto.
Aquí, hay dos casos:
- Si desea eliminar un valor particular del almacenamiento local, puede utilizar el método siguiente. En el método
remove, tenemos que pasar laclavepara el valor que desea eliminar.localStorage.remove('key') - Si desea borrar todo el almacenamiento local, puede hacerlo con este método.
localStorage.clear()
Ambos métodos se ejecutarán cuando se cierre la pestaña del navegador o el propio navegador.
Sahil is a full-stack developer who loves to build software. He likes to share his knowledge by writing technical articles and helping clients by working with them as freelance software engineer and technical writer on Upwork.
LinkedIn