كيفية تخزين البيانات في تخزين متصفح الويب - شرح localStorage و sessionStorage

من أجل إدارة البيانات التي يتعامل معها تطبيق الويب الخاص بك ، لا تحتاج بالضرورة إلى قاعدة بيانات. يتم دعم ميزات تخزين المتصفح من قبل Chrome (الإصدار 4 وما بعده) و Mozilla Firefox (الإصدار 3.5 والإصدارات الأحدث) و Internet Explorer (الإصدار 8 والإصدارات الأحدث) ، ومجموعة من المتصفحات الأخرى بما في ذلك iOS و Android.

هناك احتمالان رئيسيان لتخزين المتصفح: localStorage و sessionStorage.

التخزين المحلي

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

Example: localStorage.setItem("mykey","myvalue");

ل استرداد العنصر من التخزين المحلي ، وطريقة getItemيجب أن تستخدم. و getItemيجب تسليم طريقة مفتاح البيانات التي ترغب في استرداد:

 Example: localStorage.getItem("mykey");

يمكنك إزالة عنصر من localStorageباستخدام removeItem()الطريقة. يجب تسليم هذه الطريقة مفتاح العنصر المراد إزالته:

 Example: localStorage.removeItem("mykey");

لمسح الكل localStorage، يجب استخدام clear()الطريقة على localStorageالكائن:

 Example: localStorage.clear();

جلسة التخزين

sessionStorageستبقى العناصر المحفوظة في الكائن حتى يغلق المستخدم المتصفح. بعد ذلك ، سيتم مسح التخزين.

يمكنك حفظ عنصر في sessionStorage، الرجاء استخدام الطريقة setItem()على sessionStorageالكائن:

Example: sessionStorage.setItem("mykey","myvalue");

ل استرداد العنصر من sessionStorage ، الأسلوب getItemيجب أن تستخدم. و getItemيجب تسليم طريقة مفتاح البيانات التي ترغب في استرداد:

 Example: sessionStorage.getItem("mykey");

يمكنك إزالة عنصر من sessionStorageباستخدام removeItem()الطريقة. يجب تسليم هذه الطريقة مفتاح العنصر المراد إزالته:

 Example: sessionStorage.removeItem("mykey");

لمسح الكل sessionStorage، يجب استخدام clear()الطريقة على sessionStorageالكائن:

 Example: sessionStorage.clear();

حفظ المصفوفات في localStorage و sessionStorage

لا يمكنك فقط حفظ قيم مفردة في localStorageو sessionStorage، ولكن يمكنك أيضًا حفظ محتوى المصفوفة.

في هذا المثال لدينا مصفوفة بأرقام:

var ourArray =[1,2,3,4,5];

يمكننا الآن حفظه localStorageأو sessionStorageباستخدام setItem()الطريقة:

localStorage.setItem("ourarraykey",JSON.stringify(ourArray));

أو من أجل sessionStorage:

sessionStorage.setItem("ourarraykey",JSON.stringify(ourArray));

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

عند استرداد بياناتنا من localStorageأو sessionStorage، قم بتحويلها مرة أخرى إلى مصفوفة:

var storedArray = localStorage.getItem("ourarraykey"); ourArray = JSON.parse(storedArray);

أو من أجل sessionStorage:

var storedArray = sessionStorage.getItem("ourarraykey"); ourArray = JSON.parse(storedArray);