ตัวอย่างการใช้ HTML5 IndexDB เพื่อจัดเก็บรูปภาพและไฟล์

วันก่อนเราเขียนเกี่ยวกับวิธีบันทึกรูปภาพและไฟล์ใน localStorage เป็นเรื่องเกี่ยวกับลัทธิปฏิบัตินิยมที่เรามีอยู่ในปัจจุบัน อย่างไรก็ตาม localStorage มีผลกระทบต่อประสิทธิภาพบางประการ เราจะพูดถึงเรื่องนี้ในบล็อกต่อๆ ไป และแนวทางที่ต้องการในอนาคตคือการใช้ IndexedDB ที่นี่ ฉันจะแสดงวิธีจัดเก็บรูปภาพและไฟล์ใน IndexedDB จากนั้นเรนเดอร์ผ่าน ObjectURL

บทความนี้แปลแล้ว ข้อความต้นฉบับอยู่ที่นี่ การจัดเก็บรูปภาพและไฟล์ใน IndexedDB

เกี่ยวกับผู้แต่ง: Robert Nyman [กิตติมศักดิ์บรรณาธิการ]

ผู้เผยแพร่ศาสนาและบรรณาธิการของ Mozilla Hacks บรรยายและบล็อกเกี่ยวกับ HTML5, JavaScript และ Open Web นิวยอร์กซิตี้ เขาเขียนบล็อก atrobertnyman.com เป็นประจำ และชอบท่องเที่ยวและพบปะผู้คน

ขั้นแรก เรามาพูดถึงขั้นตอนที่เราจะดำเนินการเพื่อสร้างฐานข้อมูล IndexedDB บันทึกไฟล์ลงในนั้น จากนั้นอ่านออกและแสดงในเพจ:

1. สร้างหรือเปิดฐานข้อมูล

2. สร้าง objectStore

3. ดึงไฟล์รูปภาพเป็น blobs

4. เริ่มต้นธุรกรรมฐานข้อมูล

5. บันทึกรูปภาพหยดลงในฐานข้อมูล

6. อ่านไฟล์ที่บันทึกไว้และสร้าง ObjectURL จากนั้นตั้งค่าเป็น src ขององค์ประกอบรูปภาพในหน้า

 // IndexedDBwindow.indexedDB = window.webkitIndexedDB ||. window.OIndexedDB ||. 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 (เหตุการณ์) { console.log(ข้อผิดพลาดในการสร้าง/การเข้าถึงฐานข้อมูล IndexedDB); }; // โซลูชันชั่วคราวสำหรับ Google Chrome จะเลิกใช้งานหาก ( db.setVersion) { ถ้า (db.version != dbVersion) { var setVersion = db.setVersion(dbVersion); setVersion.onsuccess = function () { createObjectStore(db); getImageFile(); } else { getImageFile(); }}// สำหรับการใช้งานในอนาคตเท่านั้น = function (เหตุการณ์) { createObjectStore(event.target.result);};

วิธีที่คาดหวังในการใช้งานคือการเริ่มเหตุการณ์ onupgradeneeded เมื่อสร้างฐานข้อมูลหรือรับหมายเลขเวอร์ชันที่สูงกว่า ปัจจุบันฟีเจอร์นี้รองรับเฉพาะใน Firefox แต่จะรองรับในเว็บเบราว์เซอร์อื่นเร็วๆ นี้ หากเว็บเบราว์เซอร์ของคุณไม่รองรับเหตุการณ์นี้ คุณสามารถใช้เมธอด setVersion ที่เลิกใช้แล้วและเชื่อมต่อกับเหตุการณ์ที่สำเร็จได้

 // สร้าง objectStoreconsole.log (การสร้าง objectStore)dataBase.createObjectStore(ช้าง);

ที่นี่ คุณสร้าง ObjectStore ที่คุณจะจัดเก็บข้อมูล - หรือในกรณีของเราคือไฟล์ - และเมื่อสร้างขึ้นแล้ว คุณไม่จำเป็นต้องสร้างมันขึ้นมาใหม่ เพียงแค่อัปเดตเนื้อหาเท่านั้น

 // สร้าง XHRvar xhr = new XMLHttpRequest(), blob;xhr.open(GET, Elephant.png, true); // ตั้งค่า responseType เป็น blobxhr.responseType = blob;xhr.addEventListener(load, function () { if ( xhr.status === 200) { console.log (ดึงรูปภาพ); // ไฟล์เป็นการตอบกลับ blob = xhr.response; // ใส่ ได้รับหยดลงใน IndexedDB putElephantInDb(blob); }}, false);// ส่ง XHRxhr.send();

รหัสนี้รับเนื้อหาของไฟล์โดยตรงในรูปแบบหยด ปัจจุบันรองรับเฉพาะ Firefox เท่านั้น หลังจากได้รับไฟล์ทั้งหมดแล้ว ให้ส่ง Blob ไปยังฟังก์ชันเพื่อจัดเก็บไว้ในฐานข้อมูล

 // เปิดธุรกรรมไปยังธุรกรรมฐานข้อมูลvar = db.transaction([ช้าง], IDBTransaction.READ_WRITE);

หากต้องการเริ่มเขียนลงฐานข้อมูล คุณต้องเริ่มธุรกรรมด้วยชื่อ objectStore และประเภทของการดำเนินการที่คุณต้องการดำเนินการ (ในกรณีนี้ คือ อ่านและเขียน)

 // ใส่หยดลงใน 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); };

ใช้ธุรกรรมเดียวกันเพื่อรับไฟล์รูปภาพที่คุณเพิ่งจัดเก็บ จากนั้นสร้าง 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 (การสร้าง objectStore) dataBase.createObjectStore (ช้าง); }, getImageFile = function () { // Create XHR var xhr = XMLHttpRequest ใหม่ (), หยด; จริง); // ตั้งค่า 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); // เปิดธุรกรรมไปยังฐานข้อมูล var Transaction = db.transaction([ ช้าง], IDBTransaction.READ_WRITE); // ใส่หยดลงใน dabase 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 ||. window.webkitURL; // สร้างและเพิกถอน ObjectURL var imgURL = URL.createObjectURL(imgFile); // ตั้งค่า img src เป็น ObjectURL var imgElephant = document.getElementById(elephant.setAttribute(src, imgURL); onerror = function (เหตุการณ์) { console.log (เกิดข้อผิดพลาดในการสร้าง/เข้าถึง ฐานข้อมูล IndexedDB); }; request.onsuccess = function (เหตุการณ์) { console.log (ข้อผิดพลาดในการสร้าง/การเข้าถึงฐานข้อมูล IndexedDB); ฐานข้อมูล IndexedDB); }; // โซลูชันชั่วคราวสำหรับ Google Chrome เพื่อสร้าง objectStore จะเลิกใช้งานหาก (db.setVersion) { if (db.version != dbVersion) { var setVersion = db.setVersion(dbVersion); setVersion.onsuccess = function () { createObjectStore(db); } อื่น ๆ { getImageFile(); } // สำหรับการใช้งานในอนาคต ขณะนี้มีเฉพาะใน Firefox เวอร์ชันล่าสุด request.onupgradeneeded = function (เหตุการณ์) { createObjectStore(event.target.result); };})();

รองรับ URL API

ดัชนีDb

ซอร์สโค้ด Github

ข้างต้นคือเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการศึกษาของทุกคน ฉันหวังว่าทุกคนจะสนับสนุน VeVb Wulin Network