Le navigateur peut se souvenir du contenu édité

Ce tutoriel montre comment rendre les éléments HTML modifiables et persister ces modifications à l'aide de localStorage . La capacité du navigateur à se souvenir du contenu édité est présentée, abordant la question des modifications temporaires qui disparaissent lors de la rafraîchissement.

L'ajout de l'attribut contenteditable à tout élément HTML le transforme en une zone modifiable, similaire à une TextArea.

<div contenteditable="">
  Ce texte est maintenant modifiable!
</div>

Bien que limité dans une application large, cette fonctionnalité s'avère utile pour des modifications de conception en cours rapides ou des commentaires du client. Cependant, les modifications apportées à contenteditable ne sont pas persistantes; Une page actualisera ou le changement de navigateur les efface.

Pour maintenir les modifications à travers les rafraîchissements de page, localStorage fournit une solution simple. Cela implique deux étapes:

1. Enregistrer les modifications: lors de la perte de focus (événement blur ), enregistrez l'innerhtml de l'élément à localStorage à l'aide d'une clé unique (par exemple, "DataStorage-" Element ID).
2. Restauration des modifications: sur le chargement de la page, parcourez localStorage , identifiant les clés correspondant aux éléments de la page. Si une correspondance est trouvée, restaurez l'InnerHTML enregistré.

Voici le code JavaScript:

 const Editables = document.QuerySelectorAll ("[ContentEditable]");

// Enregistrer les modifications sur Blur
Modification des modifications (el => {
  el.addeventListener ("blur", () => {
    localStorage.SetItem ("DataStorage-" El.id, el.innerhtml);
  });
});

// Restaurer les modifications de chargement
pour (Laissez Key dans localStorage) {
  if (key.includs ("dataStorage-")) {
    const id = key.replace ("dataStorage-", "");
    document.QuerySelector ("#" ID) .InnerHtml = localStorage.getItem (KEY);
  }
}

Cette méthode offre une approche simple des modifications persistantes sans intégration de base de données complexe. Les concepts connexes comprennent:

• document.designMode = "on" : Active l'édition pour tous les éléments de page.
• Mavo: une solution plus robuste avec authentification et stockage de données.
• Stockage KV: une alternative potentiellement plus rapide à localStorage .

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!