The Browser Can Remember Edited Content

This tutorial demonstrates how to make HTML elements editable and persist those edits using localStorage. The browser's ability to remember edited content is showcased, addressing the issue of temporary changes disappearing on refresh.

Adding the contenteditable attribute to any HTML element transforms it into an editable area, similar to a textarea.

<div contenteditable="">
  This text is now editable!
</div>

While limited in broad application, this feature proves useful for quick in-progress design edits or client feedback. However, changes made with contenteditable are not persistent; a page refresh or browser change erases them.

To maintain edits across page refreshes, localStorage provides a simple solution. This involves two steps:

1. Saving edits: Upon losing focus (blur event), save the element's innerHTML to localStorage using a unique key (e.g., "dataStorage-" element ID).
2. Restoring edits: On page load, iterate through localStorage, identifying keys matching the page's elements. If a match is found, restore the saved innerHTML.

Here's the JavaScript code:

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

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

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

This method offers a straightforward approach to persistent edits without complex database integration. Related concepts include:

• document.designMode = "on": Enables editing for all page elements.
• Mavo: A more robust solution with authentication and data storage.
• KV storage: A potentially faster alternative to localStorage.

The above is the detailed content of The Browser Can Remember Edited Content. For more information, please follow other related articles on the PHP Chinese website!