تخزين كائنات JavaScript في HTML5 localStorage وsessionStorage

تخزين واسترجاع كائنات JavaScript في localStorage

استخدام JavaScript وJSON للتخزين المحلي

// Create an object
var testObject = {'one': 1, 'two': 2, 'three': 3};

// Convert the object to a JSON string and store it in localStorage
localStorage.setItem('testObject', JSON.stringify(testObject));

// Retrieve the JSON string from localStorage and convert it back to an object
var retrievedObject = JSON.parse(localStorage.getItem('testObject'));

// Verify the type and value of the retrieved object
console.log('typeof retrievedObject: ' + typeof retrievedObject);
console.log('Value of retrievedObject: ', retrievedObject);

// Output should be:
// typeof retrievedObject: object
// Value of retrievedObject: { one: 1, two: 2, three: 3 }

تخزين واسترجاع كائنات JavaScript في sessionStorage

استخدام JavaScript وJSON لتخزين الجلسة

// Create an object
var testObject = {'one': 1, 'two': 2, 'three': 3};

// Convert the object to a JSON string and store it in sessionStorage
sessionStorage.setItem('testObject', JSON.stringify(testObject));

// Retrieve the JSON string from sessionStorage and convert it back to an object
var retrievedObject = JSON.parse(sessionStorage.getItem('testObject'));

// Verify the type and value of the retrieved object
console.log('typeof retrievedObject: ' + typeof retrievedObject);
console.log('Value of retrievedObject: ', retrievedObject);

// Output should be:
// typeof retrievedObject: object
// Value of retrievedObject: { one: 1, two: 2, three: 3 }

أسئلة شائعة حول تخزين الكائنات في وحدة تخزين الويب

1. هل يمكنني تخزين الوظائف في localStorage أو sessionStorage؟
2. لا، لا يمكن تخزين الوظائف مباشرة في وحدة تخزين الويب. يمكنك تخزين رمز الوظيفة كسلسلة واستخدامها eval() لإعادة إنشائه، ولكن لا يوصى بهذا بشكل عام بسبب المخاطر الأمنية.
3. كيف أتعامل مع المراجع الدائرية في الكائنات؟
4. استخدم المكتبات مثل Flatted أو circular-json والتي تم تصميمها للتعامل مع المراجع الدائرية في كائنات JavaScript.
5. ما هو الحد الأقصى للتخزين ل localStorage؟
6. الحد الأقصى للتخزين ل localStorage يبلغ حجمه عادةً حوالي 5 ميغابايت، ولكنه قد يختلف بين المتصفحات.
7. هل يمكنني ضغط البيانات قبل تخزينها؟
8. نعم، يمكنك استخدام المكتبات مثل LZ-String لضغط بياناتك قبل تخزينها localStorage أو sessionStorage.
9. كيف يمكنني تخزين مجموعة من الكائنات؟
10. تحويل المصفوفة إلى سلسلة JSON باستخدام JSON.stringify() قبل تخزينها فيه localStorage أو sessionStorage.
11. هل من الآمن تخزين البيانات الحساسة في localStorage؟
12. لا، ليس من الآمن تخزين البيانات الحساسة فيها localStorage حيث يمكن الوصول إليه من خلال JavaScript ويمكن اختراقه إذا تعرض الموقع للهجوم.
13. هل بإمكاني استخدم localStorage عبر المجالات المختلفة؟
14. لا، localStorage يقتصر على نفس الأصل، مما يعني أنه لا يمكن الوصول إليه عبر مجالات مختلفة.
15. ماذا يحدث إذا قام المستخدم بمسح بيانات المتصفح الخاصة به؟
16. جميع البيانات المخزنة في localStorage و sessionStorage ستتم إزالته إذا قام المستخدم بمسح بيانات المتصفح الخاصة به.

الأفكار النهائية حول إدارة تخزين الكائنات

يتطلب تخزين الكائنات واسترجاعها بشكل فعال في تخزين ويب HTML5 تحويل الكائنات إلى سلاسل JSON باستخدام JSON.stringify() ومن ثم تحليلها مرة أخرى مع JSON.parse(). تضمن هذه الطريقة بقاء البيانات سليمة وقابلة للاستخدام عبر جلسات المتصفح المختلفة. من خلال فهم هذه التقنيات واستخدامها، يمكن للمطورين الاستفادة من localStorage وsessionStorage للقيام بمهام إدارة البيانات الأكثر تعقيدًا، مما يعزز وظائف وأداء تطبيقات الويب الخاصة بهم.