Der Browser kann sich bearbeitete Inhalte erinnern

Dieses Tutorial zeigt, wie HTML -Elemente bearbeitet werden und diese Änderungen mithilfe von localStorage bestehen bleiben. Die Fähigkeit des Browsers, bearbeitete Inhalte zu erinnern, wird gezeigt, wobei das Problem der vorübergehenden Änderungen angesprochen wird, die beim Aktualisieren verschwinden.

Das Hinzufügen des contenteditable Attributs zu jedem HTML -Element verwandelt es in einen bearbeitbaren Bereich, ähnlich wie ein Textbereich.

<div contenteditable="">
  Dieser Text ist jetzt bearbeitet!
</div>

Diese Funktion ist zwar begrenzt in der breiten Anwendung, ist jedoch nützlich für schnelle In-Progress-Design-Änderungen oder Client-Feedback. Änderungen mit contenteditable Vorgehen sind jedoch nicht anhaltend; Eine Seite aktualisiert oder Browserwechsel löscht sie aus.

Um Änderungen über Seiten -Aktualisierungen aufrechtzuerhalten, bietet localStorage eine einfache Lösung. Dies beinhaltet zwei Schritte:

1. Speichern von Änderungen: Speichern localStorage nach dem Verlust von Fokus ( blur Ereignis) die innere Haltung des Elements mit einem eindeutigen Schlüssel (z. B. "DataStorage-" Element ID).
2. Wiederherstellung von Änderungen: Auf der Seite laden Sie durch localStorage und identifizieren Sie Tasten, die den Elementen der Seite entsprechen. Wenn ein Match gefunden wird, stellen Sie die gespeicherte Innerhtml wieder her.

Hier ist der JavaScript -Code:

 const redesables = document.querySelectorAll ("[inhaltlich]");

// Änderungen auf Unschärfe speichern
editables.foreach (el => {
  El.AddeventListener ("Blur", () => {
    localStorage.setItem ("DataStorage-" El.id, El.innerhtml);
  });
});

// Änderungen bei der Last wiederherstellen
für (lass taste in LocalStorage) {
  if (key.includes ("DataStorage-")) {
    const id = key.replace ("DataStorage-", "");
    document.querySelector ("#" id) .innerhtml = localStorage.getItem (Schlüssel);
  }
}

Diese Methode bietet einen einfachen Ansatz für anhaltende Änderungen ohne komplexe Datenbankintegration. Verwandte Konzepte umfassen:

• document.designMode = "on" : Ermöglicht die Bearbeitung für alle Seitenelemente.
• Mavo: Eine robustere Lösung mit Authentifizierung und Datenspeicherung.
• KV -Speicherung: Eine potenziell schnellere Alternative zu localStorage .

Das obige ist der detaillierte Inhalt vonDer Browser kann sich bearbeitete Inhalte erinnern. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!