El navegador puede recordar el contenido editado | Programar Plus

Puede hacer que el texto dentro de cualquier elemento HTML sea editable agregando el contenteditable atributo.

<div contenteditable>
  Hey, I'm like a textarea kinda now!
</div>

No diría que hay carretillas llenas de casos de uso para eso, pero está bien. Un posible uso podría ser un diseño en curso en el que editar el contenido del diseño en sí sea útil para usted o para otra persona (¿un cliente?) que necesite cambiar el texto.

Que bien, contenteditable. Ahora alguien puede hacer clic en el texto y editarlo.

No hay nada permanente en esos cambios. Actualice la página, busque en otro navegador o lo que sea. Esas ediciones se han ido.

Digamos que desea hacer un trabajo un poco mejor y hacer que los cambios sean persistentes. No está tratando de crear un CMS aquí, o guardar los datos a través de una conexión autenticada a una base de datos ni nada. Solo desea que las ediciones del texto se mantengan si la página se actualiza.

Una forma es tirar los datos de los cambios de texto que realiza en localStorage.

1. Cuando se edita el texto (en blur del elemento), guarde los datos en localStorage utilizando un espacio de nombres y el
   ID del elemento como clave.
2. Cuando se carga la página, mira a través de localStorage y vea si hay claves que coincidan con los elementos de la página y, de ser así, reemplace el contenido.

const editables = document.querySelectorAll("[contenteditable]");

// save edits
editables.forEach(el => {
  el.addEventListener("blur", () => {
    localStorage.setItem("dataStorage-" + el.id, el.innerHTML);
  })
});

// once on load
for (var key in localStorage) {
  if (key.includes("dataStorage-")) {
    const id = key.replace("dataStorage-","");
    document.querySelector("#" + id).innerHTML = localStorage.getItem(key);
  }
}

ver la pluma
localStorage + contenteditable por Chris Coyier (@chriscoyier)
en CodePen.

Esto me recuerda a algunas otras cosas…

• document.designMode = "on" es como un atajo para hacer que cada elemento de la página se comporte como lo ha hecho contenteditable.
• Mavo es un poco como este concepto solo con autenticación, opciones de almacenamiento de datos reales y IU de edición.
• Si el rendimiento es una preocupación, se supone que el almacenamiento KV es una versión asíncrona más rápida de localStorage.