مثال على استخدام HTML5 IndexDB لتخزين الصور والملفات

لقد كتبنا قبل بضعة أيام عن كيفية حفظ الصور والملفات في التخزين المحلي، وكان الأمر يتعلق بالبراغماتية المتاحة لنا اليوم. ومع ذلك، فإن localStorage له بعض الآثار المترتبة على الأداء - سنناقش هذا في مدونة لاحقة - والأسلوب المرغوب في المستقبل هو استخدام IndexedDB. سأوضح لك هنا كيفية تخزين الصور والملفات في IndexedDB ثم عرضها عبر ObjectURL.

تمت ترجمة هذه المقالة، النص الأصلي هنا تخزين الصور والملفات في IndexedDB

نبذة عن المؤلف: روبرت نيمان [محرر فخري]

المبشر الفني ومحرر Mozilla Hacks يقدم محاضرات ومدونات حول HTML5 وJavaScript والويب المفتوح. روبرت مؤمن بشدة بـ HTML5 والويب المفتوح ويعمل منذ عام 1999 في تطوير Front End للويب - في السويد وفي السويد. مدينة نيويورك يقوم أيضًا بالتدوين بانتظام على موقع atrobertnyman.com ويحب السفر والالتقاء بالناس.

أولاً، دعونا نتحدث عن الخطوات التي سنتخذها لإنشاء قاعدة بيانات IndexedDB، وحفظ الملف فيها ثم قراءتها وعرضها في الصفحة:

1. إنشاء أو فتح قاعدة بيانات

2. قم بإنشاء متجر كائن

3. استرداد ملفات الصور على هيئة النقط

4. تهيئة معاملة قاعدة البيانات

5. احفظ الصورة الكبيرة في قاعدة البيانات

6. اقرأ الملف المحفوظ وأنشئ ObjectURL منه واضبطه على src لعنصر الصورة في الصفحة

 // IndexedDBwindow.indexedDB = window.indexedDB ||. window.webkitIndexedDB ||. window.OIndexedDB ||. window.msIndexedDB, IDBTransaction || , dbVersion = 1;/* ملاحظة: الطريقة الموصى بها للقيام بذلك هي التعيين إلى window.indexedDB، لتجنب المشكلات المحتملة في النطاق العام عندما تبدأ متصفحات الويب في إزالة البادئات في تطبيقاتها، يمكنك تعيينها إلى متغير، مثل var IndexedDB... ولكن بعد ذلك عليك التأكد من وجود الكود داخل ملف. function.*/// إنشاء/فتح قاعدة بياناتvar request = IndexedDB.open(elephantFiles, dbVersion);request.onsuccess = function (event) { console.log(Success create/accessing) قاعدة بيانات IndexedDB)؛ db = request.result; db.onerror = function (event) { console.log(خطأ في إنشاء/الوصول إلى قاعدة بيانات IndexedDB }); db.setVersion) { if (db.version != dbVersion) { var setVersion = db.setVersion(dbVersion); setVersion.onsuccess = function () { createObjectStore(db); getImageFile(); } else { getImageFile(); } else { getImageFile();// للاستخدام المستقبلي فقط في أحدث إصدارات Firefoxrequest.onupgradeneeded = function (event) { createObjectStore(event.target.result);};

الطريقة المتوقعة لاستخدامه هي إطلاق الحدث onupgradeneeded عند إنشاء قاعدة البيانات أو الحصول على رقم إصدار أعلى. هذه الميزة مدعومة حاليًا في Firefox فقط، ولكن سيتم دعمها في متصفحات الويب الأخرى قريبًا. إذا كان متصفح الويب لديك لا يدعم هذا الحدث، فيمكنك استخدام التابع setVersion المهمل والاتصال بحدث onsuccess الخاص به.

 // إنشاء objectStoreconsole.log(Creating objectStore)dataBase.createObjectStore(elephants);

هنا، يمكنك إنشاء ObjectStore حيث ستقوم بتخزين البيانات - أو الملفات في حالتنا - وبمجرد إنشائها، لا تحتاج إلى إعادة إنشائها، فقط قم بتحديث محتواها.

 // أنشئ XHRvar xhr = new XMLHttpRequest(), blob;xhr.open(GET, evil.png, true); (تم استرداد الصورة)؛ // الملف كاستجابة blob = xhr.response; تم استلام كائن ثنائي كبير الحجم في IndexedDB putElephantInDb(blob }}, false);// Send XHRxhr.send();

يحصل هذا الرمز مباشرة على محتويات الملف على شكل كائن ثنائي كبير الحجم. حاليا يتم دعم فايرفوكس فقط. بعد استلام الملف بأكمله، أرسل النقطة إلى الوظيفة لتخزينها في قاعدة البيانات.

 // افتح معاملة في قاعدة البياناتvar treatment = db.transaction([elephants], IDBTransaction.READ_WRITE);

لبدء الكتابة إلى قاعدة البيانات، تحتاج إلى بدء معاملة باستخدام اسم objectStore ونوع العملية التي تريد تنفيذها (في هذه الحالة، القراءة والكتابة).

 // ضع النقطة في dabasetransaction.objectStore(elephants).put(blob, image);

بمجرد إجراء المعاملة، ستحصل على مرجع إلى objectStore المطلوب، ثم ضع blob الخاص بك فيه وأعطه المفتاح.

 // استرجع الملف الذي تم تخزينه للتوtransaction.objectStore(elephants).get(image).onsuccess = function (event) { var imgFile = events.target.result; كائن 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);

استخدم نفس المعاملة للحصول على ملف الصورة الذي قمت بتخزينه للتو، ثم قم بإنشاء عنوان URL للكائن وقم بتعيينه على src للصورة في الصفحة. على سبيل المثال، قد يكون هذا أيضًا ملف JavaScript مرفقًا بعنصر برنامج نصي، والذي سيقوم بعد ذلك بتحليل JavaScript.

 (function () { // 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 () { // Create XHR var xhr = new XMLHttpRequest(), blob xhr.open(GET, evil.png,; صحيح)؛ // اضبط نوع الاستجابة على blob xhr.responseType = blob; xhr.addEventListener(load, function () { if (xhr.status === 200) { console.log(تم استرداد الصورة)؛ // Blob كاستجابة blob = xhr.response; console.log(Blob: + blob); }, false); // إرسال XHR xhr.send(); }, putElephantInDb = function (blob) { console.log(وضع الأفيال في IndexedDB); viles], IDBTransaction.READ_WRITE); // ضع النقطة في قاعدة البيانات var put =معاملة.objectStore(elephants).put(blob, image); // استرداد الملف الذي تم تخزينه للتوTransaction.objectStore(elephants).get(image).onsuccess = function (event) { var imgFile = events.target.result; احصل على كائن 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); onerror = function (event) { console.log(خطأ في الإنشاء/الوصول إلى قاعدة بيانات IndexedDB)؛ }; request.onsuccess = function (event) { console.log(نجاح في إنشاء/الوصول إلى قاعدة بيانات IndexedDB); قاعدة بيانات IndexedDB)؛ }; سيتم إهمال الحل المؤقت لـ Google Chrome لإنشاء متجر كائن if (db.setVersion) { if (db.version != dbVersion) { var setVersion = db.setVersion(dbVersion); setVersion.onsuccess = function () { createObjectStore(db); } // للاستخدام المستقبلي حاليًا فقط في أحدث إصدارات Firefox request.onupgradeneeded = function (event) { createObjectStore(event.target.result };})();

دعم واجهة برمجة تطبيقات URL

IndexDb

جيثب كود المصدر

ما ورد أعلاه هو المحتوى الكامل لهذه المقالة وآمل أن يكون مفيدًا لدراسة الجميع وآمل أيضًا أن يدعم الجميع شبكة VeVb Wulin.