브라우저는 편집 된 컨텐츠를 기억할 수 있습니다

이 튜토리얼은 HTML 요소를 편집 가능하게 만드는 방법을 보여주고 localStorage 사용하여 이러한 편집을 지속합니다. 브라우저의 편집 된 콘텐츠를 기억하는 능력이 표시되어 새로 고침에서 사라지는 임시 변경 문제를 해결합니다.

모든 HTML 요소에 contenteditable 속성을 추가하면 텍스트와 유사한 편집 가능한 영역으로 변환됩니다.

<div contenteditable="">
  이 텍스트는 이제 편집 가능합니다!
</div>

광범위한 응용 프로그램에서는 제한적이지만이 기능은 빠른 상영 디자인 편집 또는 클라이언트 피드백에 유용합니다. 그러나 contenteditable 변화는 지속적이지 않습니다. 페이지 새로 고침 또는 브라우저 변경이 지워집니다.

페이지 새로 고침에 걸쳐 편집을 유지하기 위해 localStorage 간단한 솔루션을 제공합니다. 여기에는 두 단계가 포함됩니다.

1. 편집 저장 : 초점을 잃어 버리면 ( blur 이벤트), 고유 한 키 (예 : "Datastorage-"요소 ID)를 사용하여 요소의 내부 html을 localStorage 에 저장하십시오.
2. 편집 복원 : 페이지로드에서 localStorage 반복하여 페이지의 요소와 일치하는 키를 식별합니다. 일치가 발견되면 저장된 내부를 복원하십시오.

JavaScript 코드는 다음과 같습니다.

 const editables = document.querySelectorAll ( "[ContentEdable]");

// 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 (키);
  }
}

이 방법은 복잡한 데이터베이스 통합없이 지속적으로 편집하기위한 간단한 접근 방식을 제공합니다. 관련 개념에는 다음이 포함됩니다.

• document.designMode = "on" : 모든 페이지 요소에 대한 편집을 활성화합니다.
• Mavo : 인증 및 데이터 저장 장치가있는보다 강력한 솔루션.
• KV 스토리지 : localStorage 에 대한 잠재적으로 더 빠른 대안.

위 내용은 브라우저는 편집 된 컨텐츠를 기억할 수 있습니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!