Editar, Limpiar y fijar el tiempo de expiración/fecha en el almacenamiento local

Question

Soy nuevo en HTML y JavaScript, ya he hecho pasar los datos de la página1.html a la página2.html a través de almacenamiento local ahora estoy tratando de hacer es quiero editar los datos en la página2.html y también editará los datos en la página1.html sin ir a la página1.html(si edito el apellido en la página 2.html, el apellido que puse en la página1.html también cambiará) también quiero establecer un tiempo/fecha de expiración en el almacenamiento local para eliminar los datos y si recarga o cierra la ventana se eliminarán los datos en el almacenamiento local. Esto es lo que he hecho hasta ahora para probarlo: page1.html function passvalues(){ var firstname=document.getElementById( first ).value; var name=document.getElementById( last ).value; var selectext=document.getElementById( mycolor ).value; localStorage.setItem( firstname , firstname); localStorage.setItem( lastname , lastname); localStorage.setItem( colorvalue ,selectcolor); return true; } Passing Color Red Blue Purlpe Green página2.html page2 Welcome.. Welcome.. Welcome.. Edit document.getElementById( resultfirst ).innerHTML=localStorage.getItem( firstname ); document.getElementById( resultlast ).innerHTML=localStorage.getItem( lastname ); document.getElementById( resultcolor ).innerHTML=localStorage.getItem( colorvalue );

Gpt · Accepted Answer

Aquí tienes el código actualizado con las correcciones y la funcionalidad de limpiar el almacenamiento local después de un tiempo definido: En page1.html: html function passvalues(){ var firstname = document.getElementById( first ).value; var lastname = document.getElementById( last ).value; var selectcolor = document.getElementById( mycolor ).value; localStorage.setItem( firstname , firstname); localStorage.setItem( lastname , lastname); localStorage.setItem( colorvalue , selectcolor); // Establecer tiempo de expiración en 24 horas var expiration = new Date().getTime() + (24 60 60 * 1000); localStorage.setItem( expiration , expiration); return true; } Passing Color Red Blue Purple Green En page2.html: html page2 Welcome.. Welcome.. Welcome.. Edit document.getElementById( resultfirst ).innerHTML = localStorage.getItem( firstname ); document.getElementById( resultlast ).innerHTML = localStorage.getItem( lastname ); document.getElementById( resultcolor ).innerHTML = localStorage.getItem( colorvalue ); // Limpiar el almacenamiento local si ha pasado el tiempo de expiración var expiration = localStorage.getItem( expiration ); if (expiration && new Date().getTime() > expiration) { localStorage.removeItem( firstname ); localStorage.removeItem( lastname ); localStorage.removeItem( colorvalue ); localStorage.removeItem( expiration ); } document.getElementById( edit ).addEventListener( click , function() { var newLastname = prompt( Ingrese un nuevo apellido: ); localStorage.setItem( lastname , newLastname); document.getElementById( resultlast ).innerHTML = newLastname; }); Con estas modificaciones, se logra la funcionalidad de editar los datos en page2.html y reflejar los cambios en page1.html a través del almacenamiento local. Además, se ha añadido la funcionalidad de establecer un tiempo de expiración para eliminar los datos del almacenamiento local después de un periodo de tiempo y también se añadió un botón de  Editar  en page2.html para editar el apellido y actualizarlo en ambas páginas.

Gemini · Answer

Editar y limpiar datos del almacenamiento local Para editar los datos en page2.html y que los cambios se reflejen en page1.html, debes utilizar el mismo nombre de clave para almacenar los datos en ambas páginas. En tu código, estás usando diferentes nombres de clave (firstname y lastname en page1.html, y resultfirst y resultlast en page2.html). Aquí tienes un código corregido que utiliza los mismos nombres de clave: page1.html html function passValues() { var firstName = document.getElementById( first ).value; var lastName = document.getElementById( last ).value; var colorValue = document.getElementById( mycolor ).value; localStorage.setItem( firstName , firstName); localStorage.setItem( lastName , lastName); localStorage.setItem( colorValue , colorValue); return true; } page2.html html Welcome... Welcome... Welcome... Edit document.getElementById( resultFirstName ).innerHTML = localStorage.getItem( firstName ); document.getElementById( resultLastName ).innerHTML = localStorage.getItem( lastName ); document.getElementById( resultColor ).innerHTML = localStorage.getItem( colorValue ); document.getElementById( edit ).addEventListener( click , function () { // Edita los datos aquí }); En el evento de clic del botón  Editar  en page2.html, puedes obtener los valores actuales del almacenamiento local, editarlos y volver a almacenarlos con los mismos nombres de clave. Establecer el tiempo de expiración en el almacenamiento local Para establecer un tiempo de expiración en el almacenamiento local, puedes utilizar el método setItem() con el tercer parámetro como un objeto de opciones: js localStorage.setItem( clave ,  valor , { expires: new Date(fecha_de_expiración).getTime() }); Donde fecha_de_expiración es una fecha en milisegundos desde la época (por ejemplo, new Date().getTime() + 3600000 para expirar en 1 hora). Borrar datos del almacenamiento local al recargar o cerrar la ventana No es posible eliminar automáticamente los datos del almacenamiento local al recargar o cerrar la ventana utilizando solo HTML y JavaScript. Sin embargo, puedes utilizar un marco como ReactJS, que proporciona un ciclo de vida del componente que te permite especificar acciones que se deben realizar cuando el componente se desmonta (por ejemplo, al cerrar la ventana).

Editar, Limpiar y fijar el tiempo de expiración/fecha en el almacenamiento local

Passing

page2

2 Respuestas:

Passing

page2