개시하다

사내용 웹 개발을 진행할 때 클라이언트(브라우저) 측에서 텍스트를 유지하는 필수 조건이 발생했습니다.
이를 위해 조사, 판단의 내용을 적는 클립보드 API를 주의하십시오.
클립보드 API 사용을 논의하는 사람들에게 참고가 되었으면 좋겠습니다.

글을 짓다

클립보드 API의 개요

클립보드 API를 사용하는 이유 및 대체 장치 연장

클립보드 API는 무엇입니까?

이름 과 같다
브라우저에서 클립보드(복사, 잘라내기 및 붙여넣기) 작업을 수행하는 API입니다.

MDN - 클립보드 API

클립보드 API 설명문에 설명된 대로
이전 사용Document.execCommand
클립보드에 해당하는 동작이 이루어졌다.
단, Document.execCommand 폐지
대신 클립보드 API가 사용됩니다.

데모

간단하지만 클립보드 API 프레젠테이션이 준비되어 있습니다.
실제 행동을 확인하고 싶은 사람.
수고스럽지만 아래의 시위원을 참조하세요.

소스: javascript-sandbox/clipboard-sample

src/components/Clipboard.vue

디버깅 목표: https://clipboard-sample.vercel.app/

브라우저에 대한 라이센스 필요

MDN 문서에 설명된 대로 클립보드 API
브라우저 측면의 클립보드 사용 권한이 필요합니다.
클립보드 API에 대한 라이센스, 비라이센스, 거부 상태
Permissions API에서 제공되는 query()에서 확인할 수 있습니다.

클립보드 API 사용 지연됨

두 가지 이유가 있다.

이유 1 "사용자의 경우 의도치 않게 클립보드를 거부한 경우 처리가 번거롭다"

클립보드 API는 읽기와 쓰기가 Permissions와 다릅니다.

클립보드 읽기 - clipboard-read

클립보드 쓰기 - clipboard-write

clipboard-write 초기 상태에서 허가를 받았기 때문에
만약 브라우저의 설정을 굳이 거절하지 않는다면, 나는 정상적으로 사용할 수 있다고 생각한다.
그렇지만clipboard-read 초기 상태에서는 라이센스가 없는 상태입니다.
다음은 클립보드에서 시스템의 API를 읽을 때

navigator.clipboard.read()

navigator.clipboard.readText()

라이센스/거부 선택
다음과 같은 프롬프트가 표시됩니다.

의도치 않게 블록을 선택한 경우 설정 화면에서 크롬과 Firefox 등 브라우저의 블록을 제거하는 작업이 필요합니다.
이런 상황에서

사용자 측에서 블록 해제 방법의 비용을 물어야 한다

문의를 받은 개발자(프로그래머와 정보시스템)의 응답 비용이 높다

사용자와 개발하는 쌍방은 원가를 필요로 할 수 있다.1
그래서 클립보드 API 사용을 포기했습니다.

이유2 "Permissions.request()의 구현을 기다립니다"

MDN-Permissions API 사용의 화면 하부'정리와 향후 과제'에는 이유 1과 같은 과제감이 기재돼 있다.
또한 사용자에게 권한 허가Permissions.request()를 요청하는 함수를 제공합니다.이런 기록이 있다.Permissions.request() 설치 후 아래의 설치(클립보드의 허가 확인을 다시 요청)를 실현할 수 있으며 문의할 필요가 없습니다.

async function onPasteClicked() {
  // クリップボードの読み取りを要求
  const isClipboardRead = await navigator.permissions.request({ name: 'clipboard-read' })
  if (isClipboardRead) {
    // 許可された場合の処理
  } else {
    // 拒否された場合の処理
  }
}

따라서 Permissions.request()를 설치하기 전에 클립보드 API의 사용이 지연될 것으로 판단합니다.

대체 수단

브라우저 옆에 텍스트를 저장할 수 있는 몇 가지 방법이 있습니다.

localStorage

sessionStorage

IndexedDB API

Cache

이번에는 여러 탭을 뛰어넘어 정보를 유지하는 이유로 localStorage의 방향을 결정했다.
그러나 아래 기사에 기재된 바와 같이 localStorage와sessionStorage는 참고하기 쉬워 앞으로 다른 것으로 바꾸고 싶습니다.

HTML5의 Local Storage를 사용할 수 없음(번역)

끝맺다

이상입니다.
만약 잘못이 있다면, 제때에 FB를 얻을 수 있다면 정말 좋겠다.
블록을 제거한 FAQ 페이지를 만드는 방법도 있지만, FAQ 페이지를 안내하는 도선 정비에 비용을 들이면 안 된다고 본다.  ↩