瀏覽器可以記住編輯的內容

本教程演示瞭如何使HTML元素可編輯並使用localStorage持續進行這些編輯。展示了瀏覽器記住編輯內容的能力，解決了刷新消失的臨時變化問題。

將contenteditable屬性添加到任何HTML元素中，都將其轉換為可編輯的區域，類似於Textarea。

<div contenteditable="">
  該文本現在可以編輯！
</div>

雖然在廣泛應用程序中有限，但此功能證明對快速進行過程中的設計編輯或客戶反饋很有用。但是，用contenteditable變化並不持久。頁面刷新或瀏覽器更改會擦除它們。

為了維護各個頁面刷新的編輯， localStorage提供了一個簡單的解決方案。這涉及兩個步驟：

1. 保存編輯：失去焦點（ blur事件）後，使用唯一鍵（例如，“ dataStRoade-”元素ID）將元素的InnerHTML保存到localStorage 。
2. 還原編輯：在頁面加載上，通過localStorage迭代，識別與頁面元素匹配的密鑰。如果找到匹配，請還原保存的InterHTML。

這是JavaScript代碼：

 const editables = document.queryselectorall（“ [[contendeadible]））;

//保存在模糊上的編輯
editables.foreach（el => {
  el.AddeventListener（“ Blur”，（）=> {
    localstorage.setItem（“ datastorage-” el.id，el.innerhtml）;
  }）;
}）;

//還原負載上的編輯
對於（讓key in localstorage）{
  if（key.includes（“ dataStorage-”））{
    const ID = key.replace（“ dataStorage-”，“”）;
    document.queryselector（“＃” id）.innerhtml = localstorage.getItem（key）;
  }
}

此方法提供了一種直接的方法來持續編輯，而無需複雜的數據庫集成。相關概念包括：

• document.designMode = "on" ：啟用所有頁面元素的編輯。
• MAVO：具有身份驗證和數據存儲的更強大的解決方案。
• KV存儲：一種可能更快的替代品替代localStorage 。

以上是瀏覽器可以記住編輯的內容的詳細內容。更多資訊請關注PHP中文網其他相關文章！