<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
</head>
<body style="color:white;background-color:black">
<h4>Codigo para pruebas</h4>
<p id="campo_para_mostrar_datos"></p>
<input type="text" id="campo_para_ingresar_datos" placeholder="Ingrese informacion">
<button onclick="fn_Presionar_Boton()">Mensaje en el boton</button>
<script>
function fn_Presionar_Boton() // Codigo de ejemplo al presionar el boton
{ console.log("Iniciando fn_Presionar_Boton");
alert("Hago algo al presionar el boton");
//Codigo para recuperar
let info_campo = document.getElementById("campo_para_ingresar_datos").value;
info_campo = info_campo.trim(); // Elimina los espacios en blanco
let longitud_campo = info_campo.length; // Determina la longitud del campo.
if (longitud_campo==0) // Verifica el campo tenga texto
{ alert("No ingresaste nada"); }
else
{ alert ("Ingresaste ["+info_campo+"] con longitud ["+longitud_campo+"]" )
//Codigo para copiar el contenido dentro del campo de texto
document.getElementById("campo_para_mostrar_datos").textContent = "Información ingresada : "+info_campo;
}//fin if
}//fin de function fn_Presionar_Boton()
</script>
</body>
</html>
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.
Local Storage vs Session Storage
Como se menciono 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 local storage la información permanece aun cuando la pestaña o la ventana del navegador se cierra.
En session storage la información se borra al cerrar la pestaña y/o el navegador
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.
almacenar información
El método setItem() se usara para almacenar información en el local storage. Este método lleva dos argumentos, un clave y un valor.
Sintaxis: localStorage.setItem(key, value)
Argumentos:
key : La clave o identificador del dato a almacenar. Debe ser una cadena de texto.
value : El valor del dato a almacenar. Puede ser una cadena de texto, número, objeto, arreglo, etc.
Funcionamiento
El método setItem almacena el valor asociado a la clave especificada.
Si la clave ya existe, se reemplaza el valor anterior.
Si la clave no existe, se crea una nueva entrada en el almacenamiento local.
Características
Los datos se almacenan en el navegador del usuario.
Los datos persisten incluso después de cerrar el navegador o reiniciar el equipo.
Los datos están disponibles solo para el dominio que los almacenó.
El tamaño máximo de almacenamiento varía según el navegador (generalmente 5MB).
Ejemplo
<script>
// Almacenar un valor como cadena de texto
localStorage.setItem("nombre", "Juan");
// Almacenar un valor numérico
localStorage.setItem("edad", 30);
// Almacenar un objeto con la llave "persona".
let objetoPersona = { nombre: "Juan", edad: 30 };
let llaveAlmacenar = "persona";
localStorage.setItem(llaveAlmacenar, JSON.stringify(objetoPersona));
</script>
ACTIVIDADES A REALIZAR
Objetivo: Almacena datos utilizando localStorage
Consideraciones:
El código debe estar documentado y seguir buenas prácticas de programación.
El código debe ser legible y fácil de entender
Crea un documento HTML y su codigo JavaScript asociado.
El HTML debe:
Presentar un input llamado "nombre de mascota".
Presentar un input llamado "raza"
Presentar un input llamado "color"
Presentar un button para "Guardar informacion"
El codigo JavaScript debe:
Utilizar localStorage para almacenar informacion.
Utilizar la llave de almacenamiento llamada "almacenMascotas".
La informacion que se procesa desde el HTML debe procesarse en un objeto llamado "objetoMascotas".
"objetoMascotas" tiene las propiedades : nombre, raza y color.
Procura no copiar directamente la respuesta desde una IA
SOBREESCRIBIR INFORMACION
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.
Para evitar la sobreescritura continua de datos es necesario verificar la existencia/inexistencia del local storage.
Es una forma concisa de obtener el valor de la clave "almacenMascotas" en el almacenamiento local (localStorage) y manejar el caso en que no hay información almacenada.
Explicación:
localStorage.getItem("almacenMascotas") Obtiene el valor asociado a la clave "almacenMascotas" en el almacenamiento local.
|| [] Es el operador OR (o) lógico. Si el valor obtenido en el paso 1 es null o una cadena vacía "", se evalúa como false y se devuelve el valor después del operador OR, que es un arreglo vacío [].
Casos posibles:
Valor almacenado: Hay informacion almacenada para la clave "almacenMascotas", se devuelve ese valor y se asigna a almacenMascotas.
No hay informacion almacenada: Si no hay valor almacenado para la clave "almacenMascotas", localStorage.getItem devuelve null. En este caso, el operador OR devuelve el arreglo vacío [], que se asigna a almacenMascotas.
Ejemplo de existencia completo
// Obtener información almacenada en localStorage con llave "almacenMascotas"
const almacenMascotas = localStorage.getItem("almacenMascotas")||[];
if (almacenMascotas===[])
{ // Si no hay información almacenada, crear un arreglo vacío
localStorage.setItem("almacenMascotas", JSON.stringify([objetoMascotas]));
}
else
{// Si la consulta del almacen es diferente de [] (array vacio) , contiene informacion .
// Convierte la información almacenada desde localStorage a un array mediante el metodo JSON.parse
const mascotas = JSON.parse(almacenMascotas);
// Agregar nuevo objeto Mascotas al array de mascotas.
mascotas.push(objetoMascotas);
// Actualizar información almacenada
localStorage.setItem("almacenMascotas", JSON.stringify(mascotas));
}
ACTIVIDADES A REALIZAR
Objetivo: Agregar verificacion de existencia.
Consideraciones:
El código debe estar documentado y seguir buenas prácticas de programación.
El código debe ser legible y fácil de entender
Modifica el codigo JavaScript anterior para que tenga en cuenta la posible existencia previa de informacion antes de guardar.
Procura no copiar directamente la respuesta desde una IA
RECUPERAR INFORMACION
El método localStorage.getItem(key) es un método del objeto localStorage que permite obtener el valor asociado a una clave específica en el almacenamiento local.
Sintaxis: let valor = localStorage.getItem(key);
Argumentos:
key : La clave o identificador del valor a obtener. Debe ser una cadena de texto.
Retorno
null si no hay informacion almacenada para la clave.
Si hay informacion asociado a la clave especificada
Retorna una cadena de texto.
Los valores se almacenan como cadenas de texto, por lo que si se almacenan objetos o arreglos, se deben convertir a cadenas de texto utilizando JSON.stringify() antes de almacenarlos.
Ejemplo
// Almacenar un valor
localStorage.setItem("nombre", "Juan");
// Obtener el valor
let nombre = localStorage.getItem("nombre");
console.log(nombre); // "Juan"
// Obtener un valor no existente
let edad = localStorage.getItem("edad");
console.log(edad); // null
// Obtener informacion de un array en string , con prevision de no-existencia
let almacenMascotas = localStorage.getItem("almacenMascotas")||[];
// convertir al array-string a formato array
const mascotas = JSON.parse(almacenMascotas);
ACTIVIDADES A REALIZAR
Objetivo: Recuperar informacion desde localStore
Consideraciones:
El código debe estar documentado y seguir buenas prácticas de programación.
El código debe ser legible y fácil de entender
Añade la capacidad para mostrar la información (array de objetos) al codigo original.
El HTML debe:
Añade un boton para recuperar la informacion.
Añade un div donde presentar la informacion recuperada.
El codigo JavaScript debe:
La informacion recuperada del localStorage debe presentarse en modo lista.
Procura no copiar directamente la respuesta desde una IA
Almacenar y leer información compleja en 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().
El método JSON.stringify(userObj) es un método que convierte un objeto JavaScript (userObj) en una cadena de texto en formato JSON (JavaScript Object Notation).
Sintaxis: let cadenaJSON = JSON.stringify(objetoJavaScript);
Argumentos:
objetoJavaScript : El objeto que se desea convertir en una cadena de texto JSON.
Retorno :
Una cadena de texto en formato JSON que representa el objeto original.
Ejemplo
<script>
let userObj = {
nombre: "Juan",
edad: 30,
direccion: {
calle: "Calle 123",
ciudad: "Ciudad de México"
}
};
let userJSON = JSON.stringify(userObj);
console.log(userJSON);
// Salida: {"nombre":"Juan","edad":30,"direccion":{"calle":"Calle 123","ciudad":"Ciudad de México"}}
</script>
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===[])
{
console.log('Sin datos !');
}
else
{
const userData = JSON.parse(storedUserData)
// Procesando la informacion
}
El método JSON.parse() es un método que convierte una cadena de texto en formato JSON (JavaScript Object Notation) en un objeto JavaScript.
Sintaxis: let objetoJavaScript = JSON.parse(cadenaJSON);
Argumentos:
cadenaJSON :La cadena de texto en formato JSON que se desea convertir en un objeto.
Retorno
Un objeto JavaScript que representa la estructura de datos definida en la cadena JSON.
Ejemplo
<script>
let usuarioJSON = '{"nombre":"Juan","edad":30,"direccion":{"calle":"Calle 123","ciudad":"Ciudad de México"}}';
let usuarioObj = JSON.parse(usuarioJSON);
console.log(usuarioObj);
// Salida:
// {
// nombre: "Juan",
// edad: 30,
// direccion: {
// calle: "Calle 123",
// ciudad: "Ciudad de México"
// }
// }
</script>
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 localStorage.clear() es un método que elimina todos los datos almacenados en el almacenamiento local (localStorage) del navegador.
Sintaxis: localStorage.clear();
Descripción :
Elimina todos los pares clave-valor almacenados en localStorage.
No requiere ningún argumento.
No devuelve ningún valor.
Efectos:
Todos los datos almacenados en localStorage se eliminan permanentemente.
Las claves y valores asociados se eliminan.
El almacenamiento local se reinicia.
Ejemplo
// Almacenar un valor
localStorage.setItem("nombre", "Juan");
// Verificar si el valor existe
console.log(localStorage.getItem("nombre")); // "Juan"
// Eliminar todos los datos
localStorage.clear();
// Verificar si el valor existe después de eliminar
console.log(localStorage.getItem("nombre")); // null
El método localStorage.removeItem(clave) es un método que elimina un valor específico almacenado en el almacenamiento local (localStorage) del navegador.
Sintaxis: localStorage.removeItem(clave);
Argumentos: x
clave : La clave asociada al valor que se desea eliminar.
Descripción :
Elimina el par clave-valor almacenado en localStorage que coincide con la clave proporcionada.
No devuelve ningún valor.
El valor asociado a la clave se elimina permanentemente.
La clave se elimina del almacenamiento local.
Ejemplo
<script>
// Almacenar un valor
localStorage.setItem("nombre", "Juan");
// Verificar si el valor existe
console.log(localStorage.getItem("nombre")); // "Juan"
// Eliminar el valor
localStorage.removeItem("nombre");
// Verificar si el valor existe después de eliminar
console.log(localStorage.getItem("nombre")); // null
</script>
ACTIVIDADES A REALIZAR
Objetivo: Elimina la informacion del localStore
Consideraciones:
El código debe estar documentado y seguir buenas prácticas de programación.
El código debe ser legible y fácil de entender
Añade la capacidad para eliminar TODA la información (array de objetos) al codigo original.
El HTML debe:
Añade un boton para eliminar TODA la informacion.
El codigo JavaScript debe:
Eliminar el contenido del localStore.
Procura no copiar directamente la respuesta desde una IA
