이미지를 LocalStorage에 저장하고 새 페이지에 표시하려면 어떻게 해야 합니까?

로컬 스토리지에 이미지 저장 및 새 페이지에 표시

웹 양식 작업 시 이미지 업로드 및 처리가 필요한 경우가 많습니다. 나중에 표시할 수 있도록 저장해 두세요. 이 문서에서는 이미지 업로드, localStorage 저장 및 다음 페이지에 표시를 위한 포괄적인 솔루션을 제공합니다.

이미지 업로드 및 표시

업로드하고 현재 페이지에 이미지를 표시하려면 type 속성이 'file'로 설정된 HTML 입력 필드와 readURL 함수를 호출하는 onchange 이벤트 핸들러를 사용하세요. 이 함수는 FileReader API를 사용하여 선택한 이미지 파일을 읽고 이미지 요소의 src 속성을 사용하여 페이지에 표시해야 합니다.

이미지를 LocalStorage에 저장

사용자가 양식의 나머지 부분을 작성하고 '저장' 버튼을 클릭하면 이미지를 포함한 모든 양식 입력을 localStorage 문자열로 저장합니다. 이미지를 저장하려면 getElementById 함수를 사용하여 페이지의 이미지 요소를 가져온 다음 응답에 제공된 것과 같은 함수를 사용하여 이를 Base64 문자열로 변환하고 문자열을 localStorage 값으로 저장합니다.

새 페이지에 이미지 표시

다음 페이지에서는 src 속성이 비어 있는 이미지를 생성합니다. 페이지가 로드되면 localStorage.getItem 함수를 사용하여 localStorage에서 이미지의 Base64 문자열을 검색하고 이미지 데이터 형식을 나타내는 data:image/png;base64, 접두사를 사용하여 이미지의 src 속성에 이를 적용합니다.

위 내용은 이미지를 LocalStorage에 저장하고 새 페이지에 표시하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!