لقد كتبنا قبل بضعة أيام عن كيفية حفظ الصور والملفات في التخزين المحلي، وكان الأمر يتعلق بالبراغماتية المتاحة لنا اليوم. ومع ذلك، فإن localStorage له بعض الآثار المترتبة على الأداء - سنناقش هذا في مدونة لاحقة - والأسلوب المرغوب في المستقبل هو استخدام IndexedDB. سأوضح لك هنا كيفية تخزين الصور والملفات في IndexedDB ثم عرضها عبر ObjectURL.
تمت ترجمة هذه المقالة، النص الأصلي هنا تخزين الصور والملفات في IndexedDB
نبذة عن المؤلف: روبرت نيمان [محرر فخري]
المبشر الفني ومحرر Mozilla Hacks يقدم محاضرات ومدونات حول HTML5 وJavaScript والويب المفتوح. روبرت مؤمن بشدة بـ HTML5 والويب المفتوح ويعمل منذ عام 1999 في تطوير Front End للويب - في السويد وفي السويد. مدينة نيويورك يقوم أيضًا بالتدوين بانتظام على موقع atrobertnyman.com ويحب السفر والالتقاء بالناس.
خطوات عامة لاستخدام IndexDB لتخزين الصور والملفاتأولاً، دعونا نتحدث عن الخطوات التي سنتخذها لإنشاء قاعدة بيانات IndexedDB، وحفظ الملف فيها ثم قراءتها وعرضها في الصفحة:
1. إنشاء أو فتح قاعدة بيانات
2. قم بإنشاء متجر كائن
3. استرداد ملفات الصور على هيئة النقط
4. تهيئة معاملة قاعدة البيانات
5. احفظ الصورة الكبيرة في قاعدة البيانات
6. اقرأ الملف المحفوظ وأنشئ ObjectURL منه واضبطه على src لعنصر الصورة في الصفحة
1. إنشاء أو فتح قاعدة بيانات. // 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 الخاص به.
2. قم بإنشاء objectStore (إذا لم يكن موجودًا بعد)// إنشاء objectStoreconsole.log(Creating objectStore)dataBase.createObjectStore(elephants);
هنا، يمكنك إنشاء ObjectStore حيث ستقوم بتخزين البيانات - أو الملفات في حالتنا - وبمجرد إنشائها، لا تحتاج إلى إعادة إنشائها، فقط قم بتحديث محتواها.
3. استرداد ملفات الصور على هيئة النقط// أنشئ XHRvar xhr = new XMLHttpRequest(), blob;xhr.open(GET, evil.png, true); (تم استرداد الصورة)؛ // الملف كاستجابة blob = xhr.response; تم استلام كائن ثنائي كبير الحجم في IndexedDB putElephantInDb(blob }}, false);// Send XHRxhr.send();
يحصل هذا الرمز مباشرة على محتويات الملف على شكل كائن ثنائي كبير الحجم. حاليا يتم دعم فايرفوكس فقط. بعد استلام الملف بأكمله، أرسل النقطة إلى الوظيفة لتخزينها في قاعدة البيانات.
4. تهيئة معاملة قاعدة البيانات// افتح معاملة في قاعدة البياناتvar treatment = db.transaction([elephants], IDBTransaction.READ_WRITE);
لبدء الكتابة إلى قاعدة البيانات، تحتاج إلى بدء معاملة باستخدام اسم objectStore ونوع العملية التي تريد تنفيذها (في هذه الحالة، القراءة والكتابة).
5. احفظ الصورة الكبيرة في قاعدة البيانات// ضع النقطة في dabasetransaction.objectStore(elephants).put(blob, image);
بمجرد إجراء المعاملة، ستحصل على مرجع إلى objectStore المطلوب، ثم ضع blob الخاص بك فيه وأعطه المفتاح.
6. اقرأ الملف المحفوظ وأنشئ ObjectURL منه واضبطه على src لعنصر الصورة في الصفحة // استرجع الملف الذي تم تخزينه للتو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.