Actualmente uso el siguiente código para guardar la entrada después de actualizar el navegador.
<style>textarea, input { width:100%; height:50px } </style> <textarea class='' id='thetext' onkeyup='saveValue(this)'/><br/><br/> <button id='' onclick='shift()'>Shift</button><br/><br/> <script> var input = document.getElementById("thetext"); function shift() { input.value = input.value.toUpperCase()} </script> <script>document.getElementById("thetext").value = getSavedValue("thetext"); function saveValue(e){ var id = e.id; var val = e.value; localStorage.setItem(id, val); } function getSavedValue (v){ if (!localStorage.getItem(v)) { return ""; } return localStorage.getItem(v); }</script>Cuando un usuario ingresa algo en el área de texto y sale de la ventana, el área de texto se almacena en el almacenamiento local, gracias al detector de eventos onkeyup.
Sin embargo, si el usuario presiona el botón de cambio y sale del navegador, el valor del texto en mayúsculas no se almacena en el área de texto porque no hay una acción de encendido después de presionar el botón.
Probé varios detectores de eventos en lugar de onkeyup, como onblur, onunload, pero ninguno funciona. ¿Hay algún detector de eventos que pueda registrar las acciones en ese momento? ¿O de alguna otra manera?
PD: este código no funciona en Stackoverflow, no sé por qué, sin embargo, funciona en mi página web. Por lo tanto, ignore este problema.
Simplemente puede llamar al método saveValue() después de haber hecho todo lo que necesita con la entrada.
simplemente actualice el valor guardado llamando al método savevalue() que definió así input.value = input.value.replace(); input.saveValue()
Ejecute esto en su propio entorno.
<form> <input name="first" placeholder="first" /> <input name="last" placeholder="last" /> </form> <script> const form = document.querySelector('form'); const FORM_DATA = 'FORM-DATA'; window.addEventListener('DOMContentLoaded', () => { const fromStorage = localStorage.getItem(FORM_DATA); if (!fromStorage) return; const json = JSON.parse(fromStorage); for (const input of form.querySelectorAll('input')) { input.value = json[input.name]; } }); form.addEventListener('keyup', () => { const formData = Object.fromEntries([...new FormData(form)]); localStorage.setItem(FORM_DATA, JSON.stringify(formData)); }); </script>