Understanding Strange JavaScript ‘for…in’ Behavior with localStorage

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

أولاً وقبل كل شيء، عندما تقوم بتعيين قيمة null لمفتاح ‘names’ في localStorage، فإن القيمة التي ستتم تخزينها في الواقع ستكون نص فارغ وليس قيمة null كما قد تتوقع. لذا، localStorage.getItem(‘names’) سيعيد نصًا فارغًا بدلاً من null.

عند استخدام for (var n in localStorage.getItem('names'))، يتم تكرار الحلقة عبر كل حرف في النص (في هذه الحالة، نص فارغ). لذلك، الحلقة ستدخل الجسم مرة واحدة لكل حرف في النص.

لتصحيح هذا السيناريو، يمكنك تحسين الكود على النحو التالي:

javascriptCopy code
// تعيين قيمة null لمفتاح 'names' في localStorage
localStorage.setItem('names', null);

// استخدام JSON.stringify لتحويل الكائن إلى سلسلة نصية عند الحفظ
var myObject = {'foo': 123};
localStorage.setItem('names', JSON.stringify(myObject));

// الحصول على الكائن من localStorage وتحويله من سلسلة نصية إلى كائن
var storedObject = JSON.parse(localStorage.getItem('names'));

// عرض الكائن في وحدة تنبيه
alert('names is: ' + JSON.stringify(storedObject));

// استخدام for...in بشكل صحيح للتكرار عبر خصائص الكائن
for (var key in storedObject) {
    if (storedObject.hasOwnProperty(key)) {
        alert('#' + key + '#');
    }
}

هذا التحسين يضمن تخزين واسترجاع الكائنات بشكل صحيح في localStorage، ويستخدم for...in بشكل صحيح لتكرار خصائص الكائن.

في هذا السياق، يتعين علينا فهم كيفية تفاعل JavaScript مع خاصية for...in وكيف يتم تخزين البيانات في localStorage. أولاً وقبل كل شيء، دعونا نلقي نظرة على الشيفرة التي كتبتها:

javascriptCopy code
localStorage.setItem('names', null);

alert("names is:" + localStorage.getItem('names'));

for (var n in localStorage.getItem('names')) {
    alert("#" + n + "#");
}

أولاً، قمت بتعيين قيمة null لمفتاح 'names' في localStorage. بعد ذلك، استخدمت getItem للاطلاع على القيمة المخزنة في هذا المفتاح وعرضتها باستخدام alert. يتضح أن قيمة ‘names’ هي null.

ثم، قمت بتكرار عناصر القيمة المسترجعة باستخدام for...in. وهنا يكمن السبب في السلوك الذي قد يبدو غريبًا. في JavaScript، عند استخدام for...in على سلسلة نصية (string)، يتم عرض فهرس الأحرف (characters) بدلاً من القيم الفعلية للخصائص. وعليه، ستحصل على فهرس كل حرف في النص 'null'، وليس على القيمة null نفسها.

لتصحيح هذا السلوك، يمكنك استخدام JSON.stringify عند تخزين القيمة في localStorage:

javascriptCopy code
localStorage.setItem('names', JSON.stringify(null));

وعند الاسترجاع:

javascriptCopy code
var storedValue = JSON.parse(localStorage.getItem('names'));

ثم يمكنك تكرار الخصائص باستخدام for...in بشكل صحيح. هذا التعديل يتيح لك الحصول على السلوك المتوقع وتجنب السلوك الغير متوقع الذي شهدته في البداية.