Contoh penggunaan IndexDB HTML5 untuk menyimpan gambar dan file

Suatu hari kami menulis tentang cara menyimpan gambar dan file di Penyimpanan lokal, itu tentang pragmatisme yang tersedia bagi kami saat ini. Namun, localStorage memiliki beberapa implikasi kinerja - kita akan membahasnya di blog selanjutnya - dan pendekatan yang diinginkan di masa depan adalah menggunakan IndexedDB. Di sini saya akan menunjukkan cara menyimpan gambar dan file di IndexedDB dan kemudian merendernya melalui ObjectURL.

Artikel ini diterjemahkan, teks aslinya ada di sini Menyimpan gambar dan file di IndexedDB

Tentang penulis: Robert Nyman [Editor emeritus]

Penginjil Teknis & Editor Mozilla Hacks. Memberikan ceramah & blog tentang HTML5, JavaScript & Open Web. Robert sangat percaya pada HTML5 dan Open Web dan telah bekerja sejak 1999 dengan pengembangan Front End untuk web - di Swedia dan di Swedia. Kota New York. Dia juga rutin menulis blog di atrobertnyman.com dan suka bepergian serta bertemu orang-orang.

Pertama, mari kita bahas langkah-langkah yang akan kita ambil untuk membuat database IndexedDB, simpan file ke dalamnya lalu bacakan dan tampilkan di halaman:

1. Membuat atau membuka database

2. Buat objekStore

3. Ambil file gambar sebagai gumpalan

4. Inisialisasi transaksi database

5. Simpan gumpalan gambar ke database

6. Bacakan file yang disimpan dan buat ObjectURL darinya dan atur ke src elemen gambar di halaman

 // IndexedDBwindow.indexedDB = jendela.indexedDB ||. window.webkitIndexedDB ||. window.mozIndexedDB ||. window.OIndexedDB ||. window.msIndexedDB, IDBTransaction = window.IDBTransaction || , dbVersion = 1;/* Catatan: Cara yang disarankan untuk melakukan ini adalah dengan menugaskan ke window.indexedDB, untuk menghindari potensi masalah dalam lingkup global ketika browser web mulai menghapus awalan dalam implementasinya. Anda dapat menetapkannya ke variabel, seperti var indexedDB… tetapi kemudian Anda harus memastikan bahwa kode tersebut terkandung dalam a function.*/// Buat/buka databasevar request = indexedDB.open(elephantFiles, dbVersion);request.onsuccess = function (event) { console.log(Sukses membuat/mengakses Database IndexedDB); db = request.result; db.onerror = function (event) { console.log(Kesalahan membuat/mengakses database IndexedDB }; // Solusi sementara untuk Google Chrome untuk membuat objectStore. db.setVersion) { jika (db.version != dbVersion) { var setVersion = db.setVersion(dbVersion); setVersion.onsuccess = function () { createObjectStore(db); getImageFile(); }; } else { getImageFile() } else { getImageFile(); = fungsi (peristiwa) { createObjectStore(peristiwa.target.hasil);};

Cara yang diharapkan untuk menggunakannya adalah dengan mengaktifkan acara onupgradeneeded saat membuat database atau untuk mendapatkan nomor versi yang lebih tinggi. Fitur ini saat ini hanya didukung di Firefox, namun akan segera didukung di browser web lainnya. Jika browser web Anda tidak mendukung acara ini, Anda dapat menggunakan metode setVersion yang tidak digunakan lagi dan menyambung ke acara yang berhasil.

 // Membuat objectStoreconsole.log(Membuat objectStore)dataBase.createObjectStore(gajah);

Di sini, Anda membuat ObjectStore tempat Anda akan menyimpan data - atau dalam kasus kami, file - dan setelah dibuat, Anda tidak perlu membuatnya ulang, cukup perbarui kontennya.

 // Buat XHRvar xhr = new XMLHttpRequest(), blob;xhr.open(GET, Elephant.png, true); // Atur respondType ke blobxhr.responseType = xhr.status === 200) { console.log (Gambar diambil); // File sebagai respon blob = xhr.response; menerima gumpalan ke IndexedDB putElephantInDb(blob }}, false);// Kirim XHRxhr.send();

Kode ini secara langsung mengambil konten file sebagai gumpalan. Saat ini hanya Firefox yang didukung. Setelah menerima seluruh file, kirim blob ke fungsi untuk menyimpannya di database.

 // Buka transaksi ke databasevar transaksi = db.transaction([elephants], IDBTransaction.READ_WRITE);

Untuk mulai menulis ke database, Anda perlu memulai transaksi dengan nama objectStore dan jenis operasi yang ingin Anda lakukan (dalam hal ini, baca dan tulis).

 // Masukkan blob ke dalam dabasetransaction.objectStore(elephants).put(blob, image);

Setelah transaksi dilakukan, Anda mendapatkan referensi ke objectStore yang diinginkan, lalu tempatkan blob Anda ke dalamnya dan berikan kuncinya.

 // Ambil file yang baru saja disimpantransaction.objectStore(elephants).get(image).onsuccess = function (event) { var imgFile = event.target.result; objek window.URL var URL = window.URL ||. window.webkitURL; // Membuat dan mencabut ObjectURL var imgURL = URL.createObjectURL(imgFile); // Setel img src ke ObjectURL var imgElephant = document.getElementById(elephant); imgElephant.setAttribute(src, imgURL);

Gunakan transaksi yang sama untuk mendapatkan file gambar yang baru saja Anda simpan, lalu buat objectURL dan atur ke src gambar di halaman. Misalnya, ini juga bisa berupa file JavaScript yang dilampirkan ke elemen skrip, yang kemudian akan menguraikan JavaScript.

 (fungsi () { // 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; // Buat/buka database var permintaan = indexedDB.open(elephantFiles, dbVersion), db, createObjectStore = function (dataBase) { // Membuat objectStore console.log(Membuat objectStore) dataBase.createObjectStore(elephants); XHR var xhr = XMLHttpRequest() baru, gumpalan; xhr.open(GET, gajah.png, true); // Atur responType ke blob xhr.responseType = xhr.addEventListener(load, function () { if (xhr.status === 200) { console.log(Gambar diambil); // Blob sebagai respons blob = xhr.response; console.log(Blob: + blob); // Masukkan blob yang diterima ke dalam IndexedDB putElephantInDb(blob ); }, false); // Kirim XHR xhr.send() }, putElephantInDb = function (blob) { console.log(Memasukkan gajah ke IndexedDB); // Buka transaksi ke database var transaksi = db.transaction([ gajah], IDBTransaction.READ_WRITE); // Masukkan blob ke dalam database var put = transaksi.objectStore(elephants).put(blob, image); // Ambil file yang baru saja disimpan Transaction.objectStore(elephants).get(image).onsuccess = function (event) { var imgFile = event.target.result; Dapatkan objek window.URL var URL = window.URL ||. window.webkitURL; // Membuat dan mencabut ObjectURL var imgURL = URL.createObjectURL(imgFile); // Setel img src ke ObjectURL var imgElephant = document.getElementById(elephant); imgElephant.setAttribute(src, imgURL); // Mencabut permintaan ObjectURL.revokeObjectURL(imgURL); onerror = function (event) { console.log(Kesalahan membuat/mengakses Database IndexedDB); }; request.onsuccess = function (event) { console.log(Sukses membuat/mengakses database IndexedDB); Database IndexedDB); }; // Solusi sementara bagi Google Chrome untuk membuat objectStore. Tidak akan digunakan lagi jika (db.setVersion) { if (db.version != dbVersion) { var setVersion = db.setVersion(dbVersion); setVersion.onsuccess = fungsi () { createObjectStore(db); getImageFile() }; } // Untuk penggunaan di masa mendatang. Saat ini hanya di versi Firefox terbaru request.onupgradeneeded = function (acara) { buatObjectStore(acara.target.hasil };})();

Dukungan API URL

indeksDb

Kode sumber Github

Di atas adalah keseluruhan isi artikel ini, saya harap dapat bermanfaat untuk pembelajaran semua orang. Saya juga berharap semua orang mendukung VeVb Wulin Network.