ブラウザは編集されたコンテンツを覚えています

このチュートリアルでは、HTML要素を編集可能にし、 localStorageを使用してそれらの編集を維持する方法を示しています。編集されたコンテンツを思い出すブラウザの能力が紹介され、更新時に一時的な変更が消えるという問題に対処します。

任意のHTML要素にcontenteditable属性属性を追加すると、テキストアレアと同様に、編集可能な領域に変換されます。

<div contenteditable="">
  このテキストは編集可能になりました！
</div>

幅広いアプリケーションでは制限されていますが、この機能は、すばやく進行中の設計編集またはクライアントのフィードバックに役立つことが証明されています。ただし、 contenteditableで行われた変更は永続的ではありません。ページの更新またはブラウザの変更により、それらが消去されます。

Page Refreshes全体で編集を維持するために、 localStorage簡単なソリューションを提供します。これには2つのステップが含まれます。

1. 編集の保存：フォーカス（ blurイベント）を失うと、一意のキー（「DataStorage-」要素IDなど）を使用して、要素のinnerhtmlをlocalStorageに保存します。
2. 編集の復元：ページの読み込みで、 localStorageを繰り返し、ページの要素に一致するキーを識別します。一致が見つかった場合は、保存されたinnerhtmlを復元します。

これがJavaScriptコードです：

 const editables = document.queryselectorall（ "[contenteditable]"）;

// Blurで編集を保存します
editables.foreach（el => {
  el.AddeventListener（ "Blur"、（）=> {
    localStorage.setItem（ "dataStorage-" el.id、el.innerhtml）;
  }）;
}）;

//ロード時に編集を復元します
for（localstorageでキーとする）
  if（key.includes（ "dataStorage-"））{
    const id = key.replace（ "dataStorage-"、 ""）;
    document.queryselector（ "＃" id）.innerhtml = localstorage.getitem（key）;
  }
}

この方法は、複雑なデータベース統合なしで永続的な編集に対する簡単なアプローチを提供します。関連する概念は次のとおりです。

• document.designMode = "on" ：すべてのページ要素の編集を有効にします。
• Mavo：認証とデータストレージを備えたより堅牢なソリューション。
• KVストレージ： localStorageに代わる潜在的に高速な代替品。

以上がブラウザは編集されたコンテンツを覚えていますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。