واجهة برمجة تطبيقات Web Storage: التخزين المحلي وتخزين الجلسة

توفر واجهة برمجة تطبيقات Web Storage وسيلة لتخزين البيانات في المتصفح. تحدد آليتين للتخزين مهمتين للغاية: تخزين الجلسة والتخزين المحلي ، وهي جزء من مجموعة خيارات التخزين المتاحة على منصة الويب

مقدمة

تحدد واجهة برمجة تطبيقات Web Storage آليتين للتخزين مهمتين للغاية:تخزين الجلسةوالتخزين المحلي.

إنها جزء من مجموعة خيارات التخزين المتاحة على منصة الويب ، والتي تشمل:

تم إهمال ذاكرة التخزين المؤقت للتطبيق ، ولم يتم تنفيذ Web SQL في Firefox و Edge و IE.

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

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

عند إغلاق علامة تبويب / نافذة ، يتم مسح تخزين الجلسة لعلامة التبويب / النافذة المحددة.

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

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

كلا التخزين المحلي وتخزين الجلسة همابروتوكول محدد: البيانات المخزنة عند الوصول إلى الصفحة باستخدامhttpغير متاح عندما يتم تقديم الصفحة باستخدامhttpsوالعكس صحيح.

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

كيفية الوصول إلى التخزين

يتوفر كل من التخزين المحلي وتخزين الجلسة علىwindowكائن ، حتى تتمكن من الوصول إليها باستخدامsessionStorageوlocalStorage.

مجموعة الخصائص والأساليب الخاصة بهم هي نفسها تمامًا ، لأنهم يعيدون نفس الكائن ، أتخزينموضوع.

كائن التخزين له خاصية واحدة ،length، وهو عدد عناصر البيانات المخزنة فيه.

أساليب

setItem(key, value)

setItem()يضيف عنصرًا إلى التخزين. يقبل سلسلة كمفتاح وسلسلة كقيمة:

localStorage.setItem('username', 'flaviocopes')
localStorage.setItem('id', '123')

إذا قمت بتمرير أي قيمة ليست سلسلة ، فسيتم تحويلها إلى سلسلة:

localStorage.setItem('test', 123) //stored as the '123' string
localStorage.setItem('test', { test: 1 }) //stored as "[object Object]"

getItem(key)

getItem()هي طريقة استرداد قيمة سلسلة من التخزين ، باستخدام سلسلة المفاتيح التي تم استخدامها لتخزينها:

localStorage.getItem('username') // 'flaviocopes'
localStorage.getItem('id') // '123'

removeItem(key)

removeItem()يزيل العنصر المحدد بواسطةkeyمن التخزين ، دون إرجاع أي شيء (aundefinedالقيمة):

localStorage.removeItem('id')

key(n)

كل عنصر تخزنه له رقم فهرس.

قد يبدو أن الرقم متتالي ، لذا في المرة الأولى التي تستخدم فيهاsetItem()، يمكن الرجوع إلى هذا العنصر باستخدامkey(0)، التالي معkey(1)وهلم جرا ، لكنها ليست كذلك. تقول MDN "ترتيب المفاتيح محدد بواسطة وكيل المستخدم ، لذا لا يجب الاعتماد عليه".

إذا أشرت إلى رقم لا يشير إلى عنصر تخزين ، فسيتم إرجاعهnull.

clear()

clear()يزيل كل شيء من كائن التخزين الذي تتلاعب به:

localStorage.setItem('a', 'a')
localStorage.setItem('b', 'b')
localStorage.length //2
localStorage.clear()
localStorage.length //0

حدود حجم التخزين

من خلال واجهة برمجة تطبيقات التخزين ، يمكنك تخزين بيانات أكثر بكثير مما ستتمكن من تخزين ملفات تعريف الارتباط.

قد يختلف مقدار التخزين المتاح على الويب حسب نوع التخزين (محلي أو جلسة) والمستعرض ونوع الجهاز. أابحاثبواسطة html5rocks.com يشير إلى تلك الحدود:

سطح المكتب

  • Chrome و IE و Firefox: 10 ميجابايت
  • Safari: 5 ميجابايت للتخزين المحلي ، وتخزين غير محدود للجلسات

متحرك

  • كروم ، فايرفوكس: 10 ميجابايت
  • iOS Safari و WebView: 5 ميجابايت للتخزين المحلي ، وتخزين الجلسة غير محدود ما لم يكن في iOS6 و iOS7 حيث تبلغ 5 ميجابايت
  • متصفح Android: سعة تخزين محلية تبلغ 2 ميجابايت ، وتخزين غير محدود للجلسات

تجاوز الحصة

تحتاج إلى معالجة أخطاء الحصة النسبية ، خاصة إذا كنت تخزن الكثير من البيانات. يمكنك القيام بذلك عن طريق المحاولة / الالتقاط:

try {
  localStorage.setItem('key', 'value')
} catch (domException) {
  if (
    ['QuotaExceededError', 'NS_ERROR_DOM_QUOTA_REACHED'].includes(
      domException.name
    )
  ) {
    // handle quota limit exceeded error
  }
}

ادوات المطورين

توفر جميع أدوات DevTools للمتصفحات الرئيسية واجهة رائعة لفحص البيانات المخزنة في التخزين المحلي وتخزين الجلسة ومعالجتها.

كروم

Chrome DevTools local storage

ثعلب النار

Firefox DevTools local storage

سفاري

Safari DevTools local storage


المزيد من دروس المتصفح: