로컬 저장소: 파일 개체 저장 및 복원 방법 가이드

Question

를 사용하는 HTML5/JavaScript를 사용하는 애플리케이션이 있습니다.

<input type="file" accept="image/*;capture=camera" onchange="gotPhoto(this)">

;

카메라 이미지를 캡처합니다. 내 앱이 오프라인으로 실행되기를 원하므로 나중에 사용할 수 있도록 파일(https://developer.mozilla.org/en-US/docs/Web/API/File) 개체를 로컬 저장소에 저장하려면 어떻게 해야 합니까? Ajax를 통해 업로드할 때?

파일 개체를 다음에서 가져옵니다...

function gotPhoto(element) {
     var 파일 = 요소.파일[0];
     //여기서 '파일'을 로컬 저장소에 저장하고 싶습니다. :-(
}

개체를 문자열로 변환하여 저장할 수 있지만 복원하면 더 이상 파일 개체로 인식되지 않으므로 파일 내용을 가져오는 데 사용할 수 없습니다.

이것은 달성할 수 없는 일이라고 생각하지만 제안을 받아들일 준비가 되어 있습니다.

그나저나 제 해결 방법은 전체 콘텐츠를 저장하는 동안 파일 콘텐츠를 읽고 로컬 저장소에 저장하는 것이었습니다. 이 방법은 작동하지만 각 파일이 1MB 이상의 사진이므로 로컬 저장소를 빠르게 소모합니다.

Answer 1

base64로 변환하고 저장하세요.

으아아아

Answer 2

파일 API 개체를 직렬화할 수 없습니다.

이 방법으로 구체적인 문제가 해결되지는 않지만... 나는 이것을 사용하지 않았지만 이 기사를 확인하면 사용자가 온라인일 때 복원할 수 있도록 오프라인 이미지 데이터를 일부 파일에 저장하는 몇 가지 방법(대부분의 브라우저에서는 아직 지원되지 않음)이 있는 것 같습니다. (localStorage를 사용하지 않고)