الفرق بين المراجعتين ل"Cordova/storage"

من موسوعة حسوب
اذهب إلى التنقل اذهب إلى البحث
(أنشأ الصفحة ب'<noinclude>{{DISPLAYTITLE: التخزين في Cordova}}</noinclude> تصنيف: Cordova تتوفر العديد من واجهات برمجة التطبيقات...')
 
 
(6 مراجعات متوسطة بواسطة مستخدمين اثنين آخرين غير معروضة)
سطر 1: سطر 1:
<noinclude>{{DISPLAYTITLE: التخزين في  Cordova}}</noinclude>
+
<noinclude>{{DISPLAYTITLE:التخزين في  كوردوفا}}</noinclude>
[[تصنيف: Cordova]]
+
[[تصنيف: Cordova]]
تتوفر العديد من واجهات برمجة التطبيقات (APIs) المتخصصة للتخزين لأجل لتطبيقات Cordova. راجع html5rocks [http://www.html5rocks.com/en/features/storage  storage overview] و [http://www.html5rocks.com/en/tutorials/offline/storage/  tutorial] لمزيد من المعلومات والأمثلة.  
+
تتوفر العديد من واجهات برمجة التطبيقات (APIs) المتخصصة في التخزين لأجل استخدامها مع تطبيقات كوردوفا.
  
لكل واجهة برمجية مزايا وعيوب، والتي سنلخصها هنا. وعليك اختيار ما يناسب احتياجاتك. يمكنك أيضًا استخدام عدة مقاربات في نفس التطبيق لخدمة أغراض مختلفة.  
+
لكل واجهة برمجية مزايا وعيوب، والتي سنلخصها في هذه الصفحة. وعليك اختيار ما يناسب احتياجاتك. يمكنك أيضًا استخدام عدة مقاربات في نفس التطبيق لخدمة أغراض مختلفة.
 +
==الواجهة LocalStorage==
 +
يوفر التخزين المحلي (Local storage) تخزينًا بسيطًا ومتزامنًا للبيانات على شكل أزواج مفتاح/قيمة (key/value)، وهو مدعوم من قِبَل [[Cordova/webviews|العارض]] WebView في جميع منصات كوردوفا.
 +
===ملخص الاستخدام===
 +
يمكن الوصول إلى ميزة التخزين المحلي عبر <code>window.localStorage</code>. تعرض الشيفرة التالية أهم توابع الكائن <code>Storage</code> المعاد:<syntaxhighlight lang="javascript">var storage = window.localStorage;
 +
var value = storage.getItem(key); // تمرير مفتاح لاستعادة قيمته
 +
storage.setItem(key, value) // تمرير مفتاح وقيمته لإضافة أو تحديث المفتاح
 +
storage.removeItem(key) // تمرير مفتاح لإزالة ذلك المفتاح من المخزن
 +
</syntaxhighlight>لمزيد من المعلومات، اطلع على الصفحات الخارجية التالية:
 +
*[https://html.spec.whatwg.org/multipage/webstorage.html مواصفات W3C].
 +
*[https://developer.mozilla.org/en-US/docs/Web/API/Storage الواجهة البرمجية للتخزين].
 +
*[https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API دليل التخزين].
 +
===محاسن===
 +
*مدعومة من جميع منصات كوردوفا.
 +
*بساطة وتزامنية الواجهة البرمجية تعني أنَّها سهلة الاستخدام.
 +
===مساوئ===
 +
*تخزن السلاسل النصية فقط؛ لذلك، فالبيانات المعقدة يجب أن تُسَلسَل (serialized)، هذا يعني أنه لا يمكنها تخزين إلا البيانات القابلة للسَّلسَّلة.
 +
*أداؤها سيء مع البيانات ذات الأحجام الكبيرة. تحديدًا:
 +
**عدم وجود فهرسة يعني أن عمليات البحث تتطلب تكرارًا يدويًّا (manually iterating) على جميع البيانات.
 +
**تخزين البيانات الكبيرة أو المعقدة بطيء بسبب الحاجة إلى سَلسَلة/فك (serialize/de-serialize) البيانات.
 +
**الواجهة البرمجية المتزامنة تقتضي أن الاستدعاءات ستعيق (lock) واجهة المستخدم.
 +
*محدودية المساحة الإجمالية للتخزين (5MB في العادة).
 +
*تُخزّن منصة iOS البيانات <code>localStorage</code> المحلية في موضع قد يتم تنظيفه من قبل نظام التشغيل عند الحاجة لتحرير المساحة.
 +
==الواجهة WebSQL==
 +
توفر الواجهة WebSQL واجهةً برمجيةً لتخزين البيانات في قاعدة بيانات مُهيكلة، والتي يمكن الاستعلام منها باستخدام صيغ [[SQL]] العادية (SQLite تحديدًا). وهكذا فهي تضع بين يديك إمكانية الاستفادة من قوة (وتعقيد) لغة [[SQL]].
  
== التخزين المحلي ==
+
هذه الميزة مدعومة من WebView على منصات كوردوفا التالية:
 
+
*[[Cordova/platforms android|أندرويد]]
يوفر التخزين المحلي (Local storage) تخزينًا بسيطًا ومتزامنًا لبيانات على شكل أزواج مفتاح/قيمة (key/value)، هذه المقاربة مدعومة من تقديمات WebView على جميع منصات كوردوفا.
+
*[[Cordova/platforms ios|iOS]]
=== ملخص الاستخدام ===
+
===ملخص الاستخدام===
 
+
لإنشاء أو فتح قاعدة بيانات، استخدم التابع <code>window.openDatabase()</code>:<syntaxhighlight lang="javascript">var db = window.openDatabase(name, version, displayName, estimatedSize);‎</syntaxhighlight>المعاملات المُمرَّر إلى التابع هي:
يمكن الوصول إلى ميزة التخزين المحلي عبر <code>window.localStorage</code>. تعرض الشيفرة التالية أهم توابع الكائن <code>Storage</code> المعاد:
+
*'''name:''' سلسلة نصية تمثِّل الاسم المميز لقاعدة البيانات، والذي ستُخزّن به على القرص.
<syntaxhighlight>var storage = window.localStorage;
+
*'''version:''' سلسلة نصية تمثِّل إصدار قاعدة البيانات.
var value = storage.getItem(key); // Pass a key name to get its value.
+
*'''displayName:''' سلسلة نصية تمثِّل اسم مبسط ومفهوم لقاعدة البيانات والذي سيستخدمه النظام إن كان بحاجة إلى وصف قاعدة بياناتك للمستخدم (عند طلب الإذن لزيادة حجم قاعدة البيانات مثلًا).
storage.setItem(key, value) // Pass a key name and its value to add or update that key.
+
*'''estimatedSize:''' عدد يمثِّل الحجم الأقصى المتوقع لقاعدة البيانات بالبايت (byte). فمع تزايد حجم قاعدة البيانات، قد يُطالَب المستخدم بالحصول على إذن. إذا اخترت قيمةً مناسبةً، فمن المحتمل أن تقلل من وتيرة مطالبة المستخدم بالإذن.
storage.removeItem(key) // Pass a key name to remove that key from storage.‎</syntaxhighlight>
+
يوفر كائن <code>Database</code> المُعاد التابع <code>transaction()</code> (أو <code>readTransaction()</code> لتحسين أداء معامَلات القراءة فقط [read-only]) الذي يمكِّنك من إنشاء عمليات نقل آمنة:<syntaxhighlight lang="javascript">var db = window.openDatabase(name, version, displayName, estimatedSize);
 
 
لمزيد من المعلومات، راجع:  
 
[https://html.spec.whatwg.org/multipage/webstorage.html  W3C: Spec]
 
[https://developer.mozilla.org/en-US/docs/Web/API/Storage  MDN: Storage API]  
 
[https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API  MDN: Storage Guide]  
 
=== المزايا ===
 
* مدعومة من جميع منصات Cordova.
 
* الواجهة البرمجية البسيطة والمتزامنة تعني أنها سهلة الاستخدام.
 
=== العيوب ===
 
* تخزن السلاسل النصية فقط، لذلك، فالبيانات المعقدة يجب أن تُسَلسَل (serialized)، هذا يعني أنه لا يمكن تخزين إلا البيانات القابلة للسَّلسَّلة.
 
* أداؤها سيء مع البيانات ذات الأحجام الكبيرة. بالخصوص:
 
* عدم وجود فهرسة يعني أن عمليات البحث تتطلب تكرار اليدوي على جميع البيانات.
 
* تخزين البيانات الكبيرة أو المعقدة بطيء بسبب الحاجة إلى السلسلة/الفك (serialize/de-serialize).
 
* الواجهة البرمجية المتزامنة تقنضي أن الاستدعاءات ستقفل (lock) واجهة المستخدم.
 
* محدودية المساحة الإجمالية للتخزين (حوالي 5MB عادة).
 
* تخزن منصة iOS بيانات <code>localStorage</code> في موقع قد يتم تنظيفه من قبل نظام التشغيل عند الحاجة لتحرير المساحة.
 
 
 
== WebSQL ==
 
 
 
يوفر WebSQL واجهة برمجية لتخزين البيانات في قاعدة بيانات مُهيكلة، والتي يمكن الاستعلام منها باستخدام صيغ SQL عادية (على وجه التحديد، [https://www.sqlite.org/  SQLite]). وهكذا فهي توفر إمكانية الاستفادة من قوة (وتعقيد) SQL.
 
 
 
هذه الميزة مدعومة من WebView على منصات Cordova التالية:
 
*أندرويد
 
*iOS
 
=== ملخص الاستخدام ===  
 
 
 
المدخل إلى إنشاء أو فتح قاعدة بيانات هي عبر التابع <code>window.openDatabase()</code>:  
 
<syntaxhighlight>var db = window.openDatabase(name, version, displayName, estimatedSize);‎</syntaxhighlight>  
 
* '''name''' (سلسلة نصية): يمثل الاسم المميز لقاعدة البيانات، الذي ستُخزّن به على القرص.  
 
* '''version''' (سلسلة نصية): إصدار قاعدة البيانات.  
 
* '''displayName''' (سلسلة نصية): اسم مبسط ومفهوم لقاعدة البيانات، والذي سيستخدمه النظام إن كان بحاجة إلى وصف قاعدة بياناتك للمستخدم (على سبيل المثال، عند الاستئذان لزيادة حجم قاعدة البيانات).  
 
* '''estimatedSize''' (عدد): الحجم الأقصى المتوقع لقاعدة البيانات، بالبايت (byte). مع تزايد حجم قاعدة البيانات، قد يُطالب المستخدم بالحصول على إذن. إذا اخترت قيمة مناسبة، فمن المحتمل أن يُطالب المستخدم بالإذن بمعدل أقل.  
 
 
 
يوفر كائن <code>Database</code> المُعاد التابع <code>transaction()</code> (أو <code>readTransaction()</code> لتحسين أداء معاملَات القراءة فقط [read-only]) التي تمكنك من إنشاء معاملات آمنة:  
 
<syntaxhighlight>var db = window.openDatabase(name, version, displayName, estimatedSize);
 
 
db.transaction(function (tx) {
 
db.transaction(function (tx) {
 
     tx.executeSql(sqlStatement, valueArray, function (tx, result) {
 
     tx.executeSql(sqlStatement, valueArray, function (tx, result) {
سطر 56: سطر 45:
 
         console.log(error);
 
         console.log(error);
 
     });
 
     });
});</syntaxhighlight>  
+
});</syntaxhighlight>لمزيد من المعلومات، اطلع على [http://dev.w3.org/html5/webdatabase/ مواصفات W3C]. إن أردت مرجعًا جيدًا لتعلم لغة SQL، فاطلع على [[SQL|توثيق SQL]].
 +
===إصدارات قواعد البيانات===
 +
عند فتح قاعدة بيانات قائمة، فإن كان الإصدار المحدد لا يتطابق مع إصدار قاعدة البيانات، فسيُطلق استثناء ولن تُفتح قاعدة البيانات. لكن إن حدَّدت سلسلةً فارغةً مكان الإصدار، فستُفتح قاعدة البيانات بغض النظر عن إصدارها الحالي (يمكنك الاستعلام عن الإصدار الحالي عبر <code>db.version</code>). لكن كن حذرًا، لأنه في حال إنشاء قاعدة البيانات، فستعيّن سلسلة فارغة لإصدارها.
 +
===محاسن===
 +
*أداء جيد، إذ يمكن فهرسة البيانات لتسريع عمليات البحث، كما أنّ الواجهة البرمجية غير المتزامنة تعني أنها لا تعوق (lock) واجهة المستخدم.
 +
*متانة (Robustness) واستقرار ناتجين عن استخدام نموذج قاعدة بيانات معامَلاتي (transactional database model).
 +
*دعم الإصدارات (Support for versioning).
 +
===مساوئ===
 +
*لا تدعمها كل منصات كوردوفا.
 +
*أكثر تعقيدًا من الواجهة <code>LocalStorage</code> أو الواجهة <code>IndexedDB</code>.
  
لمزيد من المعلومات، راجع:
+
*الواجهة البرمجية مهملة. من المستبعد أن تُدعم على المنصات التي لا تدعمها حاليًا، وقد تُزال من المنصات التي تدعمها إلى الآن.
[http://dev.w3.org/html5/webdatabase/ W3C: Spec]
+
*تفرِض بنية جامدة، والتي يتوجب تعريفها مقدمًا.
 +
*محدودية مساحة التخزين (5MB في العادة).
 +
==الواجهة IndexedDB==
 +
الهدف من الواجهة <code>IndexedDB</code> البرمجية هو دمج نقاط قوة الواجهتين البرمجيتين <code>LocalStorage</code> و <code>WebSQL</code>، مع تجنب نقاط ضعفهما.
  
للحصول على مدخل تقديمي جيد للغة SQL، راجع:
+
تتيح لك الواجهة <code>IndexedDB</code> تخزين كائنات [[JavaScript]] (بشرط أن تكون مدعومة من قبل خوارزمية النسخ المهيكل ([http://w3c.github.io/html/infrastructure.html#safe-passing-of-structured-data structured clone algorithm])) مُفهرَسَة بمفتاح. كما توفر بعضًا من فوائد جداول [[SQL]]، دون تقييد البنية، أو الحاجة إلى تعريفها مقدمًا.
[http://www.w3schools.com/sql/sql_intro.asp w3schools: Introduction to SQL]  
 
=== إصدارات قواعد البيانات ===
 
  
عند فتح قاعدة بيانات قائمة، إن كان الإصدار المحدد لا يتطابق مع إصدار قاعدة البيانات، فسيُطلق استثناء، ولن تُفتح قاعدة البيانات. لكن إن قمت بتحديد سلسلة فارغة لأجل الإصدار، فستُفتح قاعدة البيانات بغض النظر عن إصدارها الحالي (ويمكنك الاستعلام عن الإصدار الحالي عبر <code>db.version</code>). لكن كن حذرًا، لأنه في حال إنشاء قاعدة البيانات، فستعيّن سلسلة فارغة لإصدارها.
+
توفر <code>IndexedDB</code> نموذج بيانات بسيط وسهل الفهم، تمامًا مثل <code>LocalStorage</code>. ولكن على خلاف <code>LocalStorage</code>، يمكنك إنشاء عدة قواعد بيانات، مع عدة مخازن (stores) في كل قاعدة بيانات؛ أضف إلى ذلك أنَّ أداءها أفضل بفضل واجهتها البرمجية غير المتزامنة والبحث المفهرس.
=== المزايا ===
 
* أداء جيد - يمكن فهرسة البيانات لتسريع عمليات البحث، كما أنّ الواجهة البرمجية غير المتزامنة تعني أنها لا تعطل (lock) واجهة المستخدم.
 
* المتانة النانجة عن استخدام نموذج قاعدة بيانات معاملاتي (transactional database model).
 
* دعم الإصدارات (Support for versioning).
 
=== العيوب ===
 
* لا تدعمها كل منصات Cordova.
 
* أكثر تعقيدا من
 
LocalStorage أو
 
IndexedDB.
 
* الواجهة البرمجية مُتجاوزة. من المستبعد أن تُدعم على المنصات التي لا تدعمها حاليًا، وقد تُزال من المنصات التي تدعمها مستقبلا.
 
* تفرض بنية جامدة، والتي يتوجب تعريفها مقدمًا.
 
* محدودية مساحة التخزين (حوالي 5MB في العادة).  
 
  
== IndexedDB ==
+
الواجهة <code>IndexedDB</code> مدعومة من قِبَل WebView الأساسية على منصات كوردوفا التالية:
 
+
*[[Cordova/platforms windows|ويندوز]] (مع بعض القيود)
الهدف من الواجهة البرمجية IndexedDB هو دمج نقاط قوة في الواجهتين البرمجيتين LocalStorage و WebSQL، مع تجنب نقاط ضعفهما. تتيح لك IndexedDB تخزين كائنات جافا سكريبت (بشرط أن تكون مدعومة من قبل [http://w3c.github.io/html/infrastructure.html#safe-passing-of-structured-data  structured clone algorithm])، مع فهرستها بمفتاح. كما توفر بعض فوائد جداول SQL، دون تقييد البنية أو الحاجة إلى تعريفها في المقدمة.
+
*[[Cordova/platforms android|أندرويد]] (4.4 فما فوق)
 
+
===قيود ويندوز===
توفر IndexedDB نموذج بيانات بسيط وسهل الفهم، تمامًا مثل LocalStorage. ولكن بخلاف LocalStorage، فيمكنك إنشاء عدة قواعد بيانات، مع عدة مخازن (stores) في كل قاعدة بيانات، كما تحسن واجهتها البرمجية غير المتزامنة والبحث المفهرس أداءها.
+
دعم منصة ويندوز للواجهة <code>IndexedDB</code> غير كامل. على سبيل المثال فهي:
 
+
*غير متوفرة في عاملات الشبكة (web workers).
IndexedDB مدعومة من WebView على منصات Cordova التالية:  
+
*لا تدعم المفاتيح المسارية في المصفوفات (array keyPaths).
* ويندوز (مع بعض القيود)  
+
*لا تدعم مفاتيح المصفوفات (array keys).
* أندرويد (4.4 فما فوق)  
+
*لا تدعم البحث عن الكائنات عبر الفهارس المركبة.
=== قيود ويندوز ===  
+
===ملخص الاستخدام===
 
+
*تعمل الواجهة <code>IndexedDB</code> بشكل غير متزامن، إذ تطلب عملية معينة على قاعدة بيانات، ثم يتم إعلامك بالنتيجة عبر الحدث DOM.
دعم منصة ويندوز لـ IndexedDB غير كامل. على سبيل المثال، يفتقر إلى الميزات التالية:  
+
*عندما تقدِّم طلبًا، ستحصل على كائن طلب (request object)، والذي يوفر الحدثين <code>onerror</code> و <code>onsuccess</code>، بالإضافة إلى خصائص مثل <code>result</code> و <code>error</code> و <code>readyState</code>.
* غير متوفر في عاملات الشبكة (web workers).  
+
يوضح المثال التالي بعض الاستخدامات البسيطة للواجهة <code>IndexedDB</code>:<syntaxhighlight lang="javascript">var db;
* لا تدعم المفاتيح المسارية في المصفوفات (array keyPaths).  
 
* لا تدعم المفاتيح في المصفوفات (array keys).  
 
* لا تدعم البحث عن الكائنات عبر فهرس مركب.  
 
=== ملخص الاستخدام ===  
 
* تعمل IndexedDB بشكل غير متزامن - إذ تطلب عملية معينة على قاعدة بيانات، ثم يتم إعلامك بالنتيجة عبر حدث دوم (DOM event).  
 
* عند تقوم بتقديم طلب، ستحصل على كائن طلب (request object)، والذي يوفر الحدثين <code>onerror</code> و <code>onsuccess</code>، بالإضافة إلى خصائص مثل <code>result</code> و <code>error</code> و <code>readyState</code>.  
 
 
 
توضح الشيفرة التالية بعضالاستخدامات البسيطة لـ IndexedDB:  
 
<syntaxhighlight>var db;
 
 
var databaseName = 'myDB';
 
var databaseName = 'myDB';
 
var databaseVersion = 1;
 
var databaseVersion = 1;
سطر 108: سطر 86:
 
};
 
};
 
openRequest.onsuccess = function (event) {
 
openRequest.onsuccess = function (event) {
     // Database is open and initialized - we're good to proceed.
+
     // قاعدة البيانات مفتوحة ومهيئة، كل شيء جاهز للبدء
 
     db = openRequest.result;
 
     db = openRequest.result;
 
     displayData();
 
     displayData();
 
};
 
};
 
openRequest.onupgradeneeded = function (event) {
 
openRequest.onupgradeneeded = function (event) {
     // This is either a newly created database, or a new version number
+
     // هذه إما قاعدة بيانات منشأة حديثا، أو رقم إصدار جديد
     // has been submitted to the open() call.
+
     // open() تم تسليمه إلى استدعاء
 
     var db = event.target.result;
 
     var db = event.target.result;
 
     db.onerror = function () {
 
     db.onerror = function () {
 
         console.log(db.errorCode);
 
         console.log(db.errorCode);
 
     };
 
     };
     // Create an object store and indexes. A key is a data value used to organize
+
     //تنشئ كائن تخزين وفهارس، المفاتيح هي قيم بيانات تُستخدم لتنظيم واستعادة القيم من
     // and retrieve values in the object store. The keyPath option identifies where
+
     // keyPath  كائن التخزين. الخيار 
     // the key is stored. If a key path is specified, the store can only contain
+
     //يحدد موضع تخزين المفتاح. في حال تحديد مفتاح المسار، فلن
     // JavaScript objects, and each object stored must have a property with the
+
     //يحتوي المخزن إلا على كائنات جافاسكريبت، وينبغي أن تكون لكل الكائنات المخزنة
     // same name as the key path (unless the autoIncrement option is true).
+
     // autoIncrement خاصية بنفس اسم مفتاح المسار، إلا إن كان الخيار
 +
    // true يساوي 
 
     var store = db.createObjectStore('customers', { keyPath: 'customerId' });
 
     var store = db.createObjectStore('customers', { keyPath: 'customerId' });
     // Define the indexes we want to use. Objects we add to the store don't need
+
 
    // to contain these properties, but they will only appear in the specified
+
     //تعرف الفهارس التي نريد استخدامها. الكائنات التي نضيف إلى المخزن لا ينبغي
     // index of they do.
+
     //بالضرورة أن تحتوي هذه الخاصيات. ولكنها ستظهر فقط في الفهرس المحدد
 
     //
 
     //
 
     // syntax: store.createIndex(indexName, keyPath[, parameters]);
 
     // syntax: store.createIndex(indexName, keyPath[, parameters]);
 
     //
 
     //
     // All these values could have duplicates, so set unique to false
+
     // unique كل هذه القيم يمكن أن تكون مكررة، لذا عين قيمة   
 +
    // false إلى القيمة
 
     store.createIndex('firstName', 'firstName', { unique: false });
 
     store.createIndex('firstName', 'firstName', { unique: false });
 
     store.createIndex('lastName', 'lastName', { unique: false });
 
     store.createIndex('lastName', 'lastName', { unique: false });
سطر 138: سطر 118:
 
     store.createIndex('zipCode', 'zipCode', { unique: false });
 
     store.createIndex('zipCode', 'zipCode', { unique: false });
 
     store.createIndex('country', 'country', { unique: false });
 
     store.createIndex('country', 'country', { unique: false });
     // Once the store is created, populate it
+
     // بمجرد إنشاء المخزن، قم بملئه
 
     store.transaction.oncomplete = function (event) {
 
     store.transaction.oncomplete = function (event) {
        // The transaction method takes an array of the names of object stores
+
 
        // and indexes that will be in the scope of the transaction (or a single
+
      // transaction يأخذ التابع
        // string to access a single object store). The transaction will be
+
      // مصفوفة مؤلفة من أسماء كائنات التخزين والفهارس التي ستكون في
        // read-only unless the optional 'readwrite' parameter is specified.
+
      //نطاق المعاملة، أو سلسلة نصية واحدة للدخول إلى كائن تخزين واحد. ستكون
        // It returns a transaction object, which provides an objectStore method
+
      // readwrite المعاملة للقراءة فقط إلا في حال تحديد الوسيط الاختياري
        // to access one of the object stores that are in the scope of this
+
      // objectStore يعيد كائن معاملات، والذي يوفر التابع
        //transaction.
+
      //للدخول إلى إحدى كائنات التخزين الموجودة في نطاق هذه المعاملة
 +
 
 
         var customerStore = db.transaction('customers', 'readwrite').objectStore('customers');
 
         var customerStore = db.transaction('customers', 'readwrite').objectStore('customers');
 
         customers.forEach(function (customer) {
 
         customers.forEach(function (customer) {
سطر 154: سطر 135:
 
};
 
};
 
function displayData() {
 
function displayData() {
}‎</syntaxhighlight>  
+
}‎</syntaxhighlight>لمزيد من المعلومات، اطلع على الصفحات الخارجية التالية:
 
+
*[http://www.w3.org/TR/IndexedDB/ مواصفات W3C]
لمزيد من المعلومات، راجع:  
+
*[https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API توثيق الواجهة IndexedDB]
[http://www.w3.org/TR/IndexedDB/ W3C: Spec]  
+
*[https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API/Basic_Concepts_Behind_IndexedDB مفاهيم أساسية حول IndexedDB]
[https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API MDN: IndexedDB API Reference]  
+
*[https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API/Using_IndexedDB دليل استخدام IndexedDB]
[https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API/Basic_Concepts_Behind_IndexedDB MDN: IndexedDB Basic Concepts]  
+
===محاسن===
[https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API/Using_IndexedDB MDN: Using IndexedDB Guide]  
+
*الأداء الجيد، إذ لن تعيق الواجهة البرمجية غير المتزامنة واجهة المستخدم، كما ستوفر الفهرسة أداءً جيدًا في عمليات البحث.
=== المزايا ===  
+
*نموذج بيانات بسيط أسهل في التعلم من [[SQL]].
* الأداء الجيد - لن تعيق الواجهة البرمجية غير المتزامنة واجهة المستخدم، كما ستوفر الفهرسة أداءً جيدًا في عمليات البحث.  
+
*بنية أكثر مرونة من الواجهة <code>WebSQL</code>.
* نموذج بيانات بسيط أسهل في التعلم من SQL.  
+
*يوفر تعدد قواعد البيانات ومخازن الكائنات (object stores) بنية أكثر تفصيلًا من الواجهة <code>LocalStorage</code>.
* بنية أكثر مرونة من WebSQL.  
+
*متانة واستقرار نتيجة استخدام نموذج بيانات معاملاتي (transactional database model).
* يوفر تعدد قواعد البيانات ومخازن الكائنات (object stores) بنية أكثر تفصيلا من LocalStorage.  
+
*دعم الإصدارات.
* المتانة نتيجة استخدام نموذج بيانات معاملاتي (transactional database model).  
+
===مساوئ===
* دعم الإصدارات.  
+
*غير مدعومة على منصة [[Cordova/platforms ios|iOS]].
=== العيوب ===  
+
*واجهة برمجية معقدة مع استدعاءات متشعبة (nested callbacks).
* غير مدعومة على منصة iOS.  
+
*محدودية مساحة التخزين (5MB في العادة).
* واجهة برمجية معقدة تحتوي على استدعاءات متشعبة.  
+
==خيارات تستند على الإضافات==
* محدودية مساحة التخزين (حوالي 5MB في العادة).  
+
===الواجهة البرمجية FileSystem===
 
+
كانت الواجهة FileSystem البرمجية جزءًا من مواصفات W3C، وقد نُفِّذت من قبل Chrome دون بقية المتصفحات.
== إضافات ==  
 
=== FileSystem API ===  
 
 
 
كانت FileSystem API جزءًا من مواصفات W3C، والتي تم تتزيلها من قبل Chrome دون بقية المتصفحات. توفر هذه الإضافة واجهات برمجية لتخزين واسترجاع البيانات على نظام الملفات المحلي (يمكنك معرفة المزيد من المقال المفصل [http://www.html5rocks.com/en/tutorials/file/filesystem/  html5rocks article]). على الرغم من أن الواجهة البرمجية غير مدعومة من قبل أي منصة من منصات كوردوفا، يوفر [https://github.com/apache/cordova-plugin-file/blob/master/README.md  File plugin] تقديما شاملاً ومتوفرًا على جميع منصات Cordova.
 
=== إضافة SQLite ===
 
  
توفر الإضافة SQLite واجهة برمجية شبه مطابقة لواجهة WebSQL الموضحة أعلاه. الاختلافات الرئيسية هي:  
+
توفر هذه الواجهة واجهات برمجية لتخزين واسترجاع البيانات على نظام الملفات المحلي (يمكنك معرفة المزيد عبر هذا ا[http://www.html5rocks.com/en/tutorials/file/filesystem/ لمقال]). على الرغم من أن هذه الواجهة البرمجية غير مدعومة ابتدائيًا من قبل أي منصة من منصات كوردوفا، إلا أن الإضافة [https://github.com/apache/cordova-plugin-file/blob/master/README.md File] توفر تنفيذًا شاملاً ومتوفرًا على جميع منصات كوردوفا.
* مدعومة من منصة ويندوز.  
+
===الإضافة SQLite===
* ليس لها فعليا قيود على الحجم.  
+
توفر الإضافة SQLite واجهةً برمجيةً مشابهة للواجهة WebSQL الموضحة أعلاه مع بعض الاختلافات، أهمها أنها:
 +
*مدعومةٌ من منصة ويندوز.
 +
*ليس لها فعليًا قيود على الحجم.
 +
كما أنَّها متاحةً في الإصدارات التالية:
 +
*[https://github.com/litehelpers/Cordova-sqlite-storage#readme cordova-sqlite-storage]: الإصدار الأساسي الذي يتضمن التنفيذ sqlite3 الخاص بها. وهو مدعوم من منصات [[Cordova/platforms ios|iOS]] و<nowiki/>[[أندرويد]] و<nowiki/>[[Cordova/platforms windows|ويندوز]].
 +
*[https://github.com/litehelpers/cordova-sqlite-ext#readme cordova-sqlite-ext]: إصدار موسع مع ميزات إضافية بما في ذلك دعم التعابير النظامية (REGEXP) على [[Cordova/platforms android|أندرويد]] و [[Cordova/platforms ios|iOS]].
 +
*[https://github.com/litehelpers/Cordova-sqlite-enterprise-free#readme cordova-sqlite-evfree]: مماثل  للإصدار Cordova-sqlite-ext، ولكنه أكثر كفاءة في التعامل مع الذاكرة. متاح تحت رخصة جنو العمومية الإصدار الثالث (GPL v3) أو تحت رخصة تجارية.
 +
===إضافات أخرى===
 +
إن أردت خيارات تخزين بديلة فابحث في [https://cordova.apache.org/plugins مستودع إضافات كوردوفا.]
  
كما أنها متاحة في التشكيلات التالية:
+
== انظر أيضًا ==
* '''cordova-sqlite-storage''' - الإصدار الأساسي الذي يتضمن تقديمها (implementation) الخاص لـ sqlite3. وهو مدعوم من منصات iOS و أندرويد وويندوز.  
+
* [[Cordova/plugins|تطوير الإضافات]].
* '''cordova-sqlite-ext''' - إصدار موسع مع ميزات إضافية بما في ذلك دعم التعبيرات النمطية (REGEXP) على أندرويد و iOS.
+
* إضافة [[Cordova/cordova plugin file|الوصول إلى الملفات]].
* '''cordova-sqlite-evfree''' - مماثلة ل
 
Cordova-sqlite-ext ولكن مع تحسين التعامل مع الذاكرة. متاحة تحت رخصة GPL v3 أو تحت رخصة تجارية.  
 
=== إضافات أخرى ===
 
  
ابحث عن [/plugins  Cordova plugins] لأجل إضافات أخرى توفر خيارات تخزين بديلة.
 
 
==مصادر==
 
==مصادر==
*[https://cordova.apache.org/docs/en/latest/cordova/storage/storage.html قسم التخزين في التوثيق الرسمي لكوردوفا.]
+
*[https://cordova.apache.org/docs/en/latest/cordova/storage/storage.html صفحة Storage في توثيق كوردوفا الرسمي.]

المراجعة الحالية بتاريخ 07:49، 1 ديسمبر 2020

تتوفر العديد من واجهات برمجة التطبيقات (APIs) المتخصصة في التخزين لأجل استخدامها مع تطبيقات كوردوفا.

لكل واجهة برمجية مزايا وعيوب، والتي سنلخصها في هذه الصفحة. وعليك اختيار ما يناسب احتياجاتك. يمكنك أيضًا استخدام عدة مقاربات في نفس التطبيق لخدمة أغراض مختلفة.

الواجهة LocalStorage

يوفر التخزين المحلي (Local storage) تخزينًا بسيطًا ومتزامنًا للبيانات على شكل أزواج مفتاح/قيمة (key/value)، وهو مدعوم من قِبَل العارض WebView في جميع منصات كوردوفا.

ملخص الاستخدام

يمكن الوصول إلى ميزة التخزين المحلي عبر window.localStorage. تعرض الشيفرة التالية أهم توابع الكائن Storage المعاد:

var storage = window.localStorage;
var value = storage.getItem(key); // تمرير مفتاح لاستعادة قيمته
storage.setItem(key, value) // تمرير مفتاح وقيمته لإضافة أو تحديث المفتاح
storage.removeItem(key) // تمرير مفتاح لإزالة ذلك المفتاح من المخزن

لمزيد من المعلومات، اطلع على الصفحات الخارجية التالية:

محاسن

  • مدعومة من جميع منصات كوردوفا.
  • بساطة وتزامنية الواجهة البرمجية تعني أنَّها سهلة الاستخدام.

مساوئ

  • تخزن السلاسل النصية فقط؛ لذلك، فالبيانات المعقدة يجب أن تُسَلسَل (serialized)، هذا يعني أنه لا يمكنها تخزين إلا البيانات القابلة للسَّلسَّلة.
  • أداؤها سيء مع البيانات ذات الأحجام الكبيرة. تحديدًا:
    • عدم وجود فهرسة يعني أن عمليات البحث تتطلب تكرارًا يدويًّا (manually iterating) على جميع البيانات.
    • تخزين البيانات الكبيرة أو المعقدة بطيء بسبب الحاجة إلى سَلسَلة/فك (serialize/de-serialize) البيانات.
    • الواجهة البرمجية المتزامنة تقتضي أن الاستدعاءات ستعيق (lock) واجهة المستخدم.
  • محدودية المساحة الإجمالية للتخزين (5MB في العادة).
  • تُخزّن منصة iOS البيانات localStorage المحلية في موضع قد يتم تنظيفه من قبل نظام التشغيل عند الحاجة لتحرير المساحة.

الواجهة WebSQL

توفر الواجهة WebSQL واجهةً برمجيةً لتخزين البيانات في قاعدة بيانات مُهيكلة، والتي يمكن الاستعلام منها باستخدام صيغ SQL العادية (SQLite تحديدًا). وهكذا فهي تضع بين يديك إمكانية الاستفادة من قوة (وتعقيد) لغة SQL.

هذه الميزة مدعومة من WebView على منصات كوردوفا التالية:

ملخص الاستخدام

لإنشاء أو فتح قاعدة بيانات، استخدم التابع window.openDatabase()‎:

var db = window.openDatabase(name, version, displayName, estimatedSize);

المعاملات المُمرَّر إلى التابع هي:

  • name: سلسلة نصية تمثِّل الاسم المميز لقاعدة البيانات، والذي ستُخزّن به على القرص.
  • version: سلسلة نصية تمثِّل إصدار قاعدة البيانات.
  • displayName: سلسلة نصية تمثِّل اسم مبسط ومفهوم لقاعدة البيانات والذي سيستخدمه النظام إن كان بحاجة إلى وصف قاعدة بياناتك للمستخدم (عند طلب الإذن لزيادة حجم قاعدة البيانات مثلًا).
  • estimatedSize: عدد يمثِّل الحجم الأقصى المتوقع لقاعدة البيانات بالبايت (byte). فمع تزايد حجم قاعدة البيانات، قد يُطالَب المستخدم بالحصول على إذن. إذا اخترت قيمةً مناسبةً، فمن المحتمل أن تقلل من وتيرة مطالبة المستخدم بالإذن.

يوفر كائن Database المُعاد التابع transaction()‎ (أو readTransaction()‎ لتحسين أداء معامَلات القراءة فقط [read-only]) الذي يمكِّنك من إنشاء عمليات نقل آمنة:

var db = window.openDatabase(name, version, displayName, estimatedSize);
db.transaction(function (tx) {
    tx.executeSql(sqlStatement, valueArray, function (tx, result) {
        console.log(result);
    }, function (error) {
        console.log(error);
    });
});

لمزيد من المعلومات، اطلع على مواصفات W3C. إن أردت مرجعًا جيدًا لتعلم لغة SQL، فاطلع على توثيق SQL.

إصدارات قواعد البيانات

عند فتح قاعدة بيانات قائمة، فإن كان الإصدار المحدد لا يتطابق مع إصدار قاعدة البيانات، فسيُطلق استثناء ولن تُفتح قاعدة البيانات. لكن إن حدَّدت سلسلةً فارغةً مكان الإصدار، فستُفتح قاعدة البيانات بغض النظر عن إصدارها الحالي (يمكنك الاستعلام عن الإصدار الحالي عبر db.version). لكن كن حذرًا، لأنه في حال إنشاء قاعدة البيانات، فستعيّن سلسلة فارغة لإصدارها.

محاسن

  • أداء جيد، إذ يمكن فهرسة البيانات لتسريع عمليات البحث، كما أنّ الواجهة البرمجية غير المتزامنة تعني أنها لا تعوق (lock) واجهة المستخدم.
  • متانة (Robustness) واستقرار ناتجين عن استخدام نموذج قاعدة بيانات معامَلاتي (transactional database model).
  • دعم الإصدارات (Support for versioning).

مساوئ

  • لا تدعمها كل منصات كوردوفا.
  • أكثر تعقيدًا من الواجهة LocalStorage أو الواجهة IndexedDB.
  • الواجهة البرمجية مهملة. من المستبعد أن تُدعم على المنصات التي لا تدعمها حاليًا، وقد تُزال من المنصات التي تدعمها إلى الآن.
  • تفرِض بنية جامدة، والتي يتوجب تعريفها مقدمًا.
  • محدودية مساحة التخزين (5MB في العادة).

الواجهة IndexedDB

الهدف من الواجهة IndexedDB البرمجية هو دمج نقاط قوة الواجهتين البرمجيتين LocalStorage و WebSQL، مع تجنب نقاط ضعفهما.

تتيح لك الواجهة IndexedDB تخزين كائنات JavaScript (بشرط أن تكون مدعومة من قبل خوارزمية النسخ المهيكل (structured clone algorithm)) مُفهرَسَة بمفتاح. كما توفر بعضًا من فوائد جداول SQL، دون تقييد البنية، أو الحاجة إلى تعريفها مقدمًا.

توفر IndexedDB نموذج بيانات بسيط وسهل الفهم، تمامًا مثل LocalStorage. ولكن على خلاف LocalStorage، يمكنك إنشاء عدة قواعد بيانات، مع عدة مخازن (stores) في كل قاعدة بيانات؛ أضف إلى ذلك أنَّ أداءها أفضل بفضل واجهتها البرمجية غير المتزامنة والبحث المفهرس.

الواجهة IndexedDB مدعومة من قِبَل WebView الأساسية على منصات كوردوفا التالية:

قيود ويندوز

دعم منصة ويندوز للواجهة IndexedDB غير كامل. على سبيل المثال فهي:

  • غير متوفرة في عاملات الشبكة (web workers).
  • لا تدعم المفاتيح المسارية في المصفوفات (array keyPaths).
  • لا تدعم مفاتيح المصفوفات (array keys).
  • لا تدعم البحث عن الكائنات عبر الفهارس المركبة.

ملخص الاستخدام

  • تعمل الواجهة IndexedDB بشكل غير متزامن، إذ تطلب عملية معينة على قاعدة بيانات، ثم يتم إعلامك بالنتيجة عبر الحدث DOM.
  • عندما تقدِّم طلبًا، ستحصل على كائن طلب (request object)، والذي يوفر الحدثين onerror و onsuccess، بالإضافة إلى خصائص مثل result و error و readyState.

يوضح المثال التالي بعض الاستخدامات البسيطة للواجهة IndexedDB:

var db;
var databaseName = 'myDB';
var databaseVersion = 1;
var openRequest = window.indexedDB.open(databaseName, databaseVersion);
openRequest.onerror = function (event) {
    console.log(openRequest.errorCode);
};
openRequest.onsuccess = function (event) {
    // قاعدة البيانات مفتوحة ومهيئة، كل شيء جاهز للبدء
    db = openRequest.result;
    displayData();
};
openRequest.onupgradeneeded = function (event) {
    // هذه إما قاعدة بيانات منشأة حديثا، أو رقم إصدار جديد
    // open() تم تسليمه إلى استدعاء
    var db = event.target.result;
    db.onerror = function () {
        console.log(db.errorCode);
    };
    //تنشئ كائن تخزين وفهارس، المفاتيح هي قيم بيانات تُستخدم لتنظيم واستعادة القيم من 
    // keyPath  كائن التخزين. الخيار  
    //يحدد موضع تخزين المفتاح. في حال تحديد مفتاح المسار، فلن
    //يحتوي المخزن إلا على كائنات جافاسكريبت، وينبغي أن تكون لكل الكائنات المخزنة 
    // autoIncrement  خاصية بنفس اسم مفتاح المسار، إلا إن كان الخيار
    // true  يساوي  
    var store = db.createObjectStore('customers', { keyPath: 'customerId' });

    //تعرف الفهارس التي نريد استخدامها. الكائنات التي نضيف إلى المخزن لا ينبغي 
    //بالضرورة أن تحتوي هذه الخاصيات. ولكنها ستظهر فقط في الفهرس المحدد
    //
    // syntax: store.createIndex(indexName, keyPath[, parameters]);
    //
    // unique  كل هذه القيم يمكن أن تكون مكررة، لذا عين قيمة    
    // false إلى القيمة
    store.createIndex('firstName', 'firstName', { unique: false });
    store.createIndex('lastName', 'lastName', { unique: false });
    store.createIndex('street', 'street', { unique: false });
    store.createIndex('city', 'city', { unique: false });
    store.createIndex('zipCode', 'zipCode', { unique: false });
    store.createIndex('country', 'country', { unique: false });
    // بمجرد إنشاء المخزن، قم بملئه
    store.transaction.oncomplete = function (event) {

       // transaction  يأخذ التابع 
       // مصفوفة مؤلفة من أسماء كائنات التخزين والفهارس التي ستكون في 
       //نطاق المعاملة، أو سلسلة نصية واحدة للدخول إلى كائن تخزين واحد. ستكون 
       // readwrite المعاملة للقراءة فقط إلا في حال تحديد الوسيط الاختياري 
       // objectStore  يعيد كائن معاملات، والذي يوفر التابع 
       //للدخول إلى إحدى كائنات التخزين الموجودة في نطاق هذه المعاملة

        var customerStore = db.transaction('customers', 'readwrite').objectStore('customers');
        customers.forEach(function (customer) {
            customerStore.add(customer);
        });
    };
};
function displayData() {
}

لمزيد من المعلومات، اطلع على الصفحات الخارجية التالية:

محاسن

  • الأداء الجيد، إذ لن تعيق الواجهة البرمجية غير المتزامنة واجهة المستخدم، كما ستوفر الفهرسة أداءً جيدًا في عمليات البحث.
  • نموذج بيانات بسيط أسهل في التعلم من SQL.
  • بنية أكثر مرونة من الواجهة WebSQL.
  • يوفر تعدد قواعد البيانات ومخازن الكائنات (object stores) بنية أكثر تفصيلًا من الواجهة LocalStorage.
  • متانة واستقرار نتيجة استخدام نموذج بيانات معاملاتي (transactional database model).
  • دعم الإصدارات.

مساوئ

  • غير مدعومة على منصة iOS.
  • واجهة برمجية معقدة مع استدعاءات متشعبة (nested callbacks).
  • محدودية مساحة التخزين (5MB في العادة).

خيارات تستند على الإضافات

الواجهة البرمجية FileSystem

كانت الواجهة FileSystem البرمجية جزءًا من مواصفات W3C، وقد نُفِّذت من قبل Chrome دون بقية المتصفحات.

توفر هذه الواجهة واجهات برمجية لتخزين واسترجاع البيانات على نظام الملفات المحلي (يمكنك معرفة المزيد عبر هذا المقال). على الرغم من أن هذه الواجهة البرمجية غير مدعومة ابتدائيًا من قبل أي منصة من منصات كوردوفا، إلا أن الإضافة File توفر تنفيذًا شاملاً ومتوفرًا على جميع منصات كوردوفا.

الإضافة SQLite

توفر الإضافة SQLite واجهةً برمجيةً مشابهة للواجهة WebSQL الموضحة أعلاه مع بعض الاختلافات، أهمها أنها:

  • مدعومةٌ من منصة ويندوز.
  • ليس لها فعليًا قيود على الحجم.

كما أنَّها متاحةً في الإصدارات التالية:

  • cordova-sqlite-storage: الإصدار الأساسي الذي يتضمن التنفيذ sqlite3 الخاص بها. وهو مدعوم من منصات iOS وأندرويد وويندوز.
  • cordova-sqlite-ext: إصدار موسع مع ميزات إضافية بما في ذلك دعم التعابير النظامية (REGEXP) على أندرويد و iOS.
  • cordova-sqlite-evfree: مماثل للإصدار Cordova-sqlite-ext، ولكنه أكثر كفاءة في التعامل مع الذاكرة. متاح تحت رخصة جنو العمومية الإصدار الثالث (GPL v3) أو تحت رخصة تجارية.

إضافات أخرى

إن أردت خيارات تخزين بديلة فابحث في مستودع إضافات كوردوفا.

انظر أيضًا

مصادر