كيفية تخزين الكائنات في localStorage و sessionStorage: دليل شامل

لماذا لا يعمل localStorage مع الكائنات (وكيفية إصلاح ذلك)

هل سبق لك أن حاولت حفظ كائن في localStorage وحصلت بدلاً منه على سلسلة نصية "[object Object]"؟ إذا كان الأمر كذلك، فأنت لست وحدك. هذا السؤال على Stack Overflow حصد آلاف المشاهدات، واليوم سنفهم مرة وإلى الأبد كيفية تخزين الكائنات بشكل صحيح في تخزين الويب HTML5.

الأمر أن localStorage و sessionStorage يمكنهما العمل فقط مع السلاسل النصية. عندما تكتب:

localStorage.setItem('user', {name: 'آنا', age: 25});

يقوم JavaScript تلقائيًا باستدعاء طريقة .toString() على الكائن، وتكون النتيجة سلسلة نصية غير مفيدة. ولكن هناك طريقة مثبتة لتجاوز هذا القيد — التسلسل عبر JSON.

ما هو التسلسل ولماذا هو مطلوب

التسلسل هو عملية تحويل بنية بيانات معقدة (كائن، مصفوفة) إلى سلسلة نصية يمكن حفظها أو نقلها. العملية العكسية تسمى إلغاء التسلسل (تحويل السلسلة النصية مرة أخرى إلى كائن).

في JavaScript، هناك طريقتان مسؤولتان عن ذلك:

• JSON.stringify() — تحويل الكائن إلى سلسلة JSON
• JSON.parse() — تحويل سلسلة JSON مرة أخرى إلى كائن

هذه الطرق هي المفتاح لحل مشكلة تخزين الكائنات في localStorage و sessionStorage.

برنامج تعليمي خطوة بخطوة: حفظ كائن في localStorage

الخطوة 1. إنشاء كائن

const user = {  id: 101,  name: 'ماريا',  email: 'maria@example.com',  preferences: {    theme: 'dark',    notifications: true  },  tags: ['javascript', 'react', 'python']};

الخطوة 2. تسلسل إلى JSON

const userJSON = JSON.stringify(user);console.log(userJSON); // {"id":101,"name":"ماريا","email":"maria@example.com","preferences":{"theme":"dark","notifications":true},"tags":["javascript","react","python"]}

الخطوة 3. الحفظ في localStorage

localStorage.setItem('currentUser', userJSON);

الخطوة 4. الاسترجاع وإلغاء التسلسل

const savedUserJSON = localStorage.getItem('currentUser');const savedUser = JSON.parse(savedUserJSON);

console.log(savedUser.name); // مارياconsole.log(savedUser.preferences.theme); // darkconsole.log(savedUser.tags[0]); // javascript

هذا كل شيء! الآن لديك كائن كامل بجميع الهياكل المتداخلة.

sessionStorage: نفس الشيء، ولكن مع فارق

sessionStorage يعمل بشكل متطابق تمامًا مع localStorage، ولكن مع اختلاف مهم واحد: البيانات تعيش فقط حتى إغلاق علامة التبويب. بمجرد إغلاق علامة تبويب المتصفح — يتم حذف كل شيء.

// حفظsessionStorage.setItem('tempData', JSON.stringify({step: 3, progress: '75%'}));

// استرجاعconst temp = JSON.parse(sessionStorage.getItem('tempData'));console.log(temp.progress); // 75%

استخدم sessionStorage للبيانات المؤقتة: حالة النموذج، خطوات معالج الإعداد، الرموز المميزة لمرة واحدة.

الأخطاء النموذجية وكيفية تجنبها

الخطأ 1: نسيان التحليل

const data = localStorage.getItem('myObject');console.log(data.name); // undefined — لأن data عبارة عن سلسلة نصية!

الحل: استخدم دائمًا JSON.parse() بعد الحصول على البيانات.

الخطأ 2: حفظ undefined أو الدوال

const obj = { name: 'Alex', greet: function() { return 'Hi!'; } };localStorage.setItem('test', JSON.stringify(obj)); // سيتم فقدان الدالة

الحل: JSON.stringify لا يحفظ الدوال، undefined، Symbol