في هذا المنشور سأشرح تقنيات التخزين المختلفة في متصفحات HTML5 لإنشاء تطبيق ويب قادر على العمل دون اتصال باستخدام التقنيات القياسية المتاحة له.
تخزين الجلسة#
هو كائن يخزن المعلومات في التبويب الحالي في النطاق الحالي. لكنه يبقى عند تحديث الصفحة أو عند استعادة التبويب. نافذة تبويب جديدة ستنشئ SessionStorage جديد.
// Almacena la información en sessionStorage
sessionStorage.setItem('key', 'value');
// Obtiene la informacion almacenada desde sessionStorage
var data = sessionStorage.getItem('key');localStorage#
يوفر الوصول إلى التخزين طويل الأمد لكل نطاق.
// Almacena la información en localStorage
localStorage.setItem('key', 'value');
// Obtiene la informacion almacenada desde localStorage
var data = localStorage.getItem('key');ذاكرة التطبيقات المؤقتة (AppCache)#
إنه آلية لتخزين تطبيقات الويب مؤقتا لتتمكن من العمل معها دون اتصال. من خلال ملف البيان يمكننا تحديد الموارد المتاحة دون اتصال. كما يقلل من الحمل على الخادم ويسرع التصفح.
المراجع#
https://developer.mozilla.org/en-US/docs/Web/HTML/Using_the_application_cache https://html.spec.whatwg.org/multipage/browsers.html#appcache
قاعدة بيانات مفهرسة#
IndexedDB هو واجهة برمجة تطبيقات لتخزين كمية كبيرة من البيانات المنظمة على جانب العميل. أكبر من sessionStorage أو LocalStorage أو globalStorage
الخاتمة#
إنها التقنية المناسبة لكميات هائلة من البيانات
تعرف على المزيد#
https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API
واجهة برمجة تطبيقات الملفات#
يسمح لنا بالعمل مع هيكل الملفات، وحفظها وقراءتها على القرص نفسه. يمكن أن يكون مفيدا في ظروف مثل إذا أردنا محاكاة رفع ملف في تطبيقنا أثناء عدم الاتصال، يمكننا حفظه على القرص ومزامنته لاحقا، لكن لتحميل الصفحة، كما نعلم، الكتابة على القرص لها تكلفة عالية، ويجب أن نحاول تجنبها.
في كل من IE وكروم، يتطلب استخدام إذن المستخدم. حد التخزين هو على مساحة القرص الحرة.
مزيد من المعلومات والأمثلة#
http://www.html5rocks.com/es/tutorials/file/filesystem/
التخزين متاح#
BrowserssessionStoragelocalStorageFileAPIApplication cache (AppCache) DbInternet Explorer مفهرس 114864 k4864 kغير محدود500MB/ غير محدود (سؤال المستخدم) 250 ميجابايت (قابل للتكوين حتى 1GB لكل مستخدم) Google Chrome 445101 k5101 kغير محدود غير محدود *1300 ميجابايت (على الأقل) Microsoft Edge 1.04864 k4864 غير محدود500 ميجابايت/ غير محدود (طلب من المستخدم) 250 ميجابايت (يمكن تكوينها حتى 1 جيجابايت من قبل المستخدم) فايرفوكس 405120 k5120 غير محدود 250 ميجابايت ‘3 لا حد (إذن المستخدم) القطع >50 ميجابايت) الوحدات هي عدد الأحرف (البايتات) Test تستخدم محليا و sessionStorage: http://dev-test.nemikor.com/web-storage/support-test/
توافق المتصفح#
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)localStorage43.5810.504sessionStorage52810.504Application cache4.03.510.010.64.0IndexedDb2310IE10157.1FileApi313110257.1
- http://caniuse.com/#feat=fileapi
- http://caniuse.com/#feat=localStorage
- http://caniuse.com/#feat=sessionStorage
- http://caniuse.com/#feat=appcache
- http://caniuse.com/#feat=IndexedDb
في هذه الحالة ركزنا على متصفحات سطح المكتب، لكن على المواقع أعلاه يمكننا الحصول على معلومات عن متصفحات الهواتف المحمولة
أمثلة#
هنا يمكننا رؤية بعض الأمثلة على هذه التقنيات معا
تعرف على المزيد#
لا يوجد معايير / تدفئة (غير موصى به)#
globalStorage#
هذا كائن عالمي يحتفظ بعدة مناطق تخزين خاصة يمكن استخدامها لتخزين البيانات لفترة طويلة.
webSQL#
هي تقنية مشابهة ل IndexedDB لكنها تم إهلاها في 18 نوفمبر 2010 http://www.w3.org/TR/webdatabase/
userDataBehaviour#
كان يسمح بتخزين محدود جدا، وهو متوافق فقط مع IE وهو مهجور من IE10
إلى اللقاء في المرة القادمة!
