HTML5 IndexDB를 사용하여 이미지와 파일을 저장하는 예

저번에 우리는 localStorage에 이미지와 파일을 저장하는 방법에 대해 썼는데, 그것은 오늘날 우리가 사용할 수 있는 실용주의에 관한 것이었습니다. 그러나 localStorage는 성능에 몇 가지 영향을 미칩니다. 이에 대해서는 이후 블로그에서 논의할 예정이며, 앞으로 원하는 접근 방식은 IndexedDB를 사용하는 것입니다. 여기에서는 IndexedDB에 이미지와 파일을 저장한 다음 ObjectURL을 통해 렌더링하는 방법을 보여 드리겠습니다.

이 글은 번역되었으며 원문은 여기에 있습니다. IndexedDB에 이미지와 파일 저장하기

저자 소개: Robert Nyman [명예 편집자]

Mozilla Hacks의 기술 전도사이자 편집자입니다. HTML5, JavaScript 및 오픈 웹에 대한 강연과 블로그를 제공합니다. Robert는 HTML5와 오픈 웹의 강력한 신봉자이며 1999년부터 스웨덴과 해외에서 웹용 프런트 엔드 개발 작업을 해왔습니다. 그는 뉴욕시에서도 정기적으로 atrobertnyman.com 블로그를 운영하고 있으며 여행하고 사람들을 만나는 것을 좋아합니다.

먼저, IndexedDB 데이터베이스를 생성하고, 파일을 여기에 저장한 다음 읽어서 페이지에 표시하는 단계에 대해 이야기해 보겠습니다.

1. 데이터베이스 생성 또는 열기

2. objectStore 생성

3. 이미지 파일을 Blob으로 검색

4. 데이터베이스 트랜잭션 초기화

5. 이미지 Blob을 데이터베이스에 저장합니다.

6. 저장된 파일을 읽어서 ObjectURL을 생성하고 페이지에 있는 이미지 요소의 src로 설정합니다.

 // IndexedDBwindow.indexedDB || window.webkitIndexedDB || window.msIndexedDB, IDBTransaction = window.webkitIDBTransaction || , dbVersion = 1;/* 참고: 이를 수행하는 데 권장되는 방법은 웹 브라우저가 구현에서 접두사를 제거하기 시작할 때 전역 범위에서 잠재적인 문제를 피하기 위해 이를 window.indexedDB에 저장합니다. var indexedDB와 같은 변수에 할당할 수 있지만 코드가 function.*/// 데이터베이스 생성/열기var request = indexedDB.open(elephantFiles, dbVersion);request.onsuccess = function (event) { console.log(생성/액세스 성공 IndexedDB 데이터베이스); db = request.result; db.onerror = function (event) { console.log(IndexedDB 데이터베이스 생성/액세스 오류) }; // objectStore를 생성하기 위한 임시 솔루션은 더 이상 사용되지 않습니다. db.setVersion) { if (db.version != dbVersion) { var setVersion = db.setVersion(dbVersion); setVersion.onsuccess = function () { createObjectStore(db); getImageFile(); } else { getImageFile() } } else { getImageFile() }}// 현재는 최신 Firefox 버전에만 사용됩니다. = 함수(이벤트) { createObjectStore(event.target.result);};

예상되는 사용 방법은 데이터베이스를 생성할 때 onupgradeneeded 이벤트를 발생시키거나 더 높은 버전 번호를 얻는 것입니다. 이 기능은 현재 Firefox에서만 지원되지만 곧 다른 웹 브라우저에서도 지원될 예정입니다. 웹 브라우저가 이 이벤트를 지원하지 않는 경우 더 이상 사용되지 않는 setVersion 메소드를 사용하고 해당 onsuccess 이벤트에 연결할 수 있습니다.

 // objectStore 생성console.log(objectStore 생성)dataBase.createObjectStore(elephants);

여기서는 데이터(또는 우리의 경우 파일)를 저장할 ObjectStore를 생성합니다. 일단 생성되면 다시 생성할 필요 없이 콘텐츠만 업데이트하면 됩니다.

 // XHR 생성 xhr = new XMLHttpRequest(), blob;xhr.open(GET, Elephant.png, true); // responseType을 blobxhr.responseType = xhr.status === 200) { console.log (이미지 검색됨); // 응답으로 파일 blob = xhr.response; IndexedDB에 blob을 받았습니다. putElephantInDb(blob) }}, false);// Send XHRxhr.send();

이 코드는 파일의 내용을 Blob으로 직접 가져옵니다. 현재는 Firefox만 지원됩니다. 전체 파일을 받은 후 Blob을 함수로 보내 데이터베이스에 저장합니다.

 // 데이터베이스에 대한 트랜잭션 열기var transaction = db.transaction([elephants], IDBTransaction.READ_WRITE);

데이터베이스에 쓰기를 시작하려면 objectStore 이름과 수행하려는 작업 유형(이 경우 읽기 및 쓰기)을 사용하여 트랜잭션을 시작해야 합니다.

 // blob을 dabasetransaction.objectStore(elephants).put(blob, image)에 넣습니다.

트랜잭션이 완료되면 원하는 objectStore에 대한 참조를 얻은 다음 여기에 Blob을 배치하고 키를 제공합니다.

 // 방금 저장된 파일을 검색합니다.transaction.objectStore(elephants).get(image).onsuccess = function (event) { var imgFile = event.target.result; console.log(Got Elephant! + imgFile); window.URL 객체 var URL = window.URL || window.webkitURL; // ObjectURL 생성 및 취소 var imgURL = URL.createObjectURL(imgFile); // img src를 ObjectURL로 설정 var imgElephant = document.getElementById(elephant); imgElephant.setAttribute(src, imgURL); // ObjectURL 취소 URL.revokeObjectURL(imgURL);};

동일한 트랜잭션을 사용하여 방금 저장한 이미지 파일을 가져온 다음 objectURL을 생성하고 이를 페이지에 있는 이미지의 src로 설정합니다. 예를 들어, 이는 JavaScript를 구문 분석하는 스크립트 요소에 첨부된 JavaScript 파일일 수도 있습니다.

 (함수 () { // IndexedDB var indexedDB = window.indexedDB || window.webkitIndexedDB || window.mozIndexedDB || window.OIndexedDB || window.msIndexedDB, IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction || window.OIDBTransaction || window.msIDBTransaction, dbVersion = 1.0; // 데이터베이스 생성/열기 var request = indexedDB.open(elephantFiles, dbVersion), db, createObjectStore = function (dataBase) { // objectStore 생성 console.log(Creating objectStore) dataBase.createObjectStore(elephants) }, getImageFile = function () { // 생성 XHR var xhr = 새로운 XMLHttpRequest(), xhr.open(GET, Elephant.png, true); // responseType을 blob으로 설정 xhr.responseType = blob; xhr.addEventListener(load, function () { if (xhr.status === 200) { console.log(이미지 검색됨); // 응답으로 Blob blob = xhr.response; console.log(Blob: + blob); // 수신된 blob을 IndexedDB에 넣습니다. putElephantInDb(blob); }, false); // XHR 보내기 xhr.send(); }, putElephantInDb = function (blob) { console.log(IndexedDB에 코끼리 넣기); // 데이터베이스에 트랜잭션 열기 Elephants], IDBTransaction.READ_WRITE); // blob을 데이터베이스에 넣습니다. var put = transaction.objectStore(elephants).put(blob, image); // 방금 저장된 파일을 검색합니다. transaction.objectStore(elephants).get(image).onsuccess = function (event) { var imgFile = event.target.result; console.log(Got Elephant! + imgFile) // window.URL 객체 가져오기 var URL = window.URL || // ObjectURL 생성 및 취소 var imgURL = URL.createObjectURL(imgFile); // img src를 ObjectURL로 설정 var imgElephant = document.getElementById(elephant); imgElephant.setAttribute(src, imgURL); // ObjectURL 취소(imgURL) }; onerror = function (event) { console.log(생성/액세스 오류 IndexedDB 데이터베이스); }; request.onsuccess = function (event) { console.log(IndexedDB 데이터베이스 생성/액세스 성공) db = request.result = function (event) { console.log(생성/액세스 오류) IndexedDB 데이터베이스); }; // objectStore를 생성하기 위한 Google Chrome의 임시 솔루션은 더 이상 사용되지 않습니다. if (db.setVersion) { if (db.version != dbVersion) { var setVersion = db.setVersion(dbVersion); setVersion.onsuccess = function () { createObjectStore(db); getImageFile() } } else { getImageFile(); } // 향후 사용을 위해 현재 최신 Firefox 버전에서만 사용됩니다. request.onupgradeneeded = function (이벤트) { createObjectStore(event.target.result) };})();

URL API 지원

indexDb

Github 소스코드

위의 내용은 이 기사의 전체 내용입니다. 모든 분들의 학습에 도움이 되기를 바랍니다. 또한 모든 분들이 VeVb Wulin Network를 지지해 주시길 바랍니다.