Penyemak imbas dapat mengingati kandungan yang diedit

Tutorial ini menunjukkan cara membuat unsur -unsur HTML diedit dan meneruskan pengeditan tersebut menggunakan localStorage . Keupayaan penyemak imbas untuk mengingati kandungan yang diedit dipamerkan, menangani isu perubahan sementara yang hilang pada penyegaran.

Menambah atribut contenteditable ke mana -mana elemen HTML mengubahnya menjadi kawasan yang boleh diedit, sama dengan Textarea.

<div contenteditable="">
  Teks ini sekarang boleh diedit!
</div>

Walaupun terhad dalam aplikasi yang luas, ciri ini membuktikan berguna untuk suntingan reka bentuk yang cepat atau maklum balas pelanggan. Walau bagaimanapun, perubahan yang dibuat dengan contenteditable tidak berterusan; Sebuah halaman menyegarkan atau perubahan penyemak imbas memadamkannya.

Untuk mengekalkan suntingan di seluruh halaman semula, localStorage menyediakan penyelesaian yang mudah. Ini melibatkan dua langkah:

1. Menyimpan suntingan: Setelah kehilangan fokus (acara blur ), simpan InnerHTML elemen ke localStorage menggunakan kunci yang unik (misalnya, "Datastorage-" Element ID).
2. Memulihkan suntingan: Pada beban halaman, berulang melalui localStorage , mengenal pasti kekunci yang sepadan dengan unsur -unsur halaman. Sekiranya perlawanan dijumpai, pulihkan innerHTML yang disimpan.

Inilah kod JavaScript:

 const edunting = document.QuerySelectorAll ("[contentedable]");

// simpan suntingan pada kabur
ededitables.foreach (el => {
  el.addeventListener ("blur", () => {
    localStorage.setItem ("Datastorage-" el.id, el.innerHtml);
  });
});

// Pulihkan suntingan pada beban
untuk (biarkan kunci di localStorage) {
  jika (key.includes ("datastorage-")) {
    const id = key.Replace ("Datastorage-", "");
    document.QuerySelector ("#" id) .InnerHtml = localStorage.getItem (key);
  }
}

Kaedah ini menawarkan pendekatan mudah untuk pengeditan berterusan tanpa integrasi pangkalan data yang kompleks. Konsep berkaitan termasuk:

• document.designMode = "on" : Membolehkan penyuntingan untuk semua elemen halaman.
• Mavo: Penyelesaian yang lebih mantap dengan pengesahan dan penyimpanan data.
• Penyimpanan KV: Alternatif yang berpotensi lebih cepat untuk localStorage .

Atas ialah kandungan terperinci Penyemak imbas dapat mengingati kandungan yang diedit. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!