logo

مرحباً بك في YAYAKict  
أنت لم تقم بتسجيل دخولك! سجّل دخولك لتتفقد رسائلك.


مواقع مهمه:

أمن المعلومات والأتصالات هل انت من المهتمين في امن المعلومات والاتصالات ؟ نعم تفضل هنا تبدء رحلتك

HTML5 Storge

 

 

استخدام HTML5 تخزين الويب

يوفر لك التخزين على الويب وسيلة لتطبيقات الويب الخاصة بك لتخزين البيانات محليًا داخل متصفح المستخدم.

قبل ايجاد HTML5 ، يجب تخزين بيانات التطبيق في ملفات تعريف الارتباط. يتم تضمين ملفات تعريف الارتباط مع كل طلب HTTP ، مما يؤدي إلى إبطاء تطبيق الويب الخاص بك عن طريق نقل نفس البيانات. تقتصر ملفات تعريف الارتباط أيضًا على حوالي 4 كيلوبايت من البيانات والتي قد لا تكون كافية لتخزين البيانات المطلوبة.

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

ببساطة، يسمح تخزين الويب بتخزين كميات كبيرة من بيانات التطبيق محليًا، دون التأثير على أداء تطبيق الويب.

دعم المتصفح

أحدث الإصدارات من جميع المتصفحات إلى حد كبير بما في ذلك Internet explorer يدعم واجهة تخزين الويب. راجع هذه الصفحة للحصول على معلومات أكثر تفصيلاً حول دعم المتصفح لتخزين الويب.

أنواع من تخزين الويب

هناك نوعان رئيسيان من أنواع تخزين الويب، والتي يمكن استخدامها لتخزين البيانات محليًا:

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

الكشف عن جافا سكريبت

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

if (window.localStorage) {

// Browser supports localStorage

// Good to go

} else {

// No localStorage support

}

 

 

طرق تخزين HTML5 WEB

تحتوي مساحة التخزين على الويب بتنسيق HTML5 على عدة طرق مختلفة لجافا سكريبت تجعلها سهلة الاستخدام، دعنا نلقي نظرة على بعض:

ملاحظة: تنطبق هذه الطرق على كل من أنواع تخزين الويب (التخزين المحلي وتخزين الجلسة).

لتعيين البيانات، نحتاج إلى إجراء ما يلي:

 

localStorage.setItem('Name', 'somevalue');

 

لاسترداد بعض البيانات من التخزين

 

localStorage.getItem('Name');

لحذف او إزالة أي معلومات نستطيع استخدام

localStorage.removeItem('Name');

 

 

لمسح السعة التخزينية بالكامل (وليس فقط عنصرًا فرديًا)، يمكننا استخدام

localStorage.clear();

 

وللحصول على عدد الخصائص في التخزين، يمكننا استخدام

localStorage.length;

 

تحديد المشكلة " STRINGS ONLY" فقط

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

var person = {

Name: 'John Doe',

Age: 24,

Gender: 'Male',

Nationality: 'Nigerian'

}

localStorage.setItem('person', person);

localStorage.getItem('person');

 

تبيّن تجربة الشفرة الواردة أعلاه في وحدة تحكم المتصفح أن البيانات يتم تخزينها كـ [object object] بدلاً من المعلومات الموجودة في كائن الشخص

 

 

Output

يمكن حل هذه المشكلة باستخدام أساليب JSON.stringify () وJSON.parse () الأصلي :

 

var person = {

Name: 'John Doe',

Age: 24,

Gender: 'Male',

Nationality: 'Nigerian'

}

localStorage.setItem('person', JSON.stringify(person));

JSON.parse(localStorage.getItem('person'));

 

 

 

معالجة الخطاء

من المفيد جدا هو عملية كشف الخطاء واعطائك تنبيه عنه ليتم معالجته

try {

localStorage.setItem('name', 'somevalue');

} catch (e) {

if (e == QUOTA_EXCEEDED_ERR) {

alert('Storage limit exceeded');

}

}

 

 

 

لقراءة المزيد ,الرجوع لصفحة الانترنت