LocalStorage تقنية ويب تتيح تخزين البيانات محليًا في متصفح المستخدم، ما يمكّن تطبيقات الويب من الاحتفاظ بالمعلومات دون الحاجة إلى اتصال بخادم. وهذه التقنية جزء من معايير HTML5، وتقدم طريقة بسيطة وفعالة للحفاظ على البيانات عبر الجلسات، ما يحسّن تجربة المستخدم بجعل التطبيقات أسرع وأكثر استجابة. وتُعدّ LocalStorage مفيدة بشكل خاص لتخزين إعدادات المستخدم أو حالة التطبيق أو المعلومات المخزنة مؤقتًا التي يمكن الوصول إليها مجددًا حتى بعد إغلاق المتصفح وإعادة فتحه.
تتيح LocalStorage لتطبيقات الويب تخزين أزواج من المفاتيح والقيم في متصفح المستخدم، حيث تظل البيانات متاحة إلى أن يحذفها التطبيق أو المستخدم صراحةً. وبسعة تخزين تبلغ عادةً 5–10 MB لكل مصدر، تقدم LocalStorage طريقة دائمة لتخزين البيانات مثالية للتطبيقات التي تحتاج إلى وصول سريع إلى بيانات غير حساسة دون اتصال مستمر بخادم. وهذا يجعل LocalStorage خيارًا شائعًا بين المطورين الذين يريدون تحسين الأداء وتجربة المستخدم في تطبيقات الويب الحديثة.
LocalStorage تقنية ويب تتيح تخزين البيانات محليًا في متصفح المستخدم، ما يمكّن تطبيقات الويب من الاحتفاظ بالمعلومات بشكل دائم دون الاتصال بخادم. وهذه الوظيفة مثالية للتطبيقات التي تتطلب وصولًا سريعًا إلى البيانات، إذ تلغي الحاجة إلى طلبات متكررة إلى الخادم، ما يحسّن الأداء وتجربة المستخدم معًا. وتستطيع LocalStorage تخزين نحو 5 MB من البيانات لكل مصدر، ويمكن الوصول إليها عبر JavaScript، ما يسهّل على المطورين تطبيقها. وتظل البيانات متاحة حتى بعد إغلاق المتصفح، ما يجعل LocalStorage أداة عملية لتخزين تفضيلات المستخدم وحالة التطبيق والبيانات الدائمة الأخرى. ومن ناحية الأمان، من المهم ملاحظة أن البيانات في LocalStorage غير مشفرة، لذا لا ينبغي استخدامها للمعلومات الحساسة.
More about LocalStorage
LocalStorage تقنية ويب قوية تتيح تخزين البيانات محليًا في متصفح المستخدم، ما يمكّن من الوصول السريع والدائم إلى المعلومات دون طلبات إلى الخادم. وهذه القدرة من الخصائص الرئيسية التي تجعل LocalStorage مناسبة بشكل خاص للتطبيقات التي يكون فيها الوصول دون اتصال والاسترجاع السريع للبيانات أمرين حاسمين، مثل تطبيقات الويب التي تحتاج إلى إعدادات مستخدم دائمة وبيانات مخزنة مؤقتًا وحالة تطبيق بسيطة.
من الناحية التقنية، LocalStorage جزء من واجهة Web Storage API المدمجة في متصفحات الويب الحديثة. وهي تتيح لـ JavaScript تخزين أزواج من المفاتيح والقيم في صورة سلاسل نصية في مساحة تخزين المتصفح على الجهاز، حيث تظل البيانات متاحة حتى بعد إغلاق المتصفح وإعادة فتحه. وهذا يجعل LocalStorage عملية وفعالة لأغراض كثيرة، إذ لا تتطلب تفاعلًا مع الخادم لاسترجاع البيانات المخزنة.
يمكن استخدام LocalStorage في عدة سيناريوهات مختلفة، يدعم كل منها نوعًا مختلفًا من التعامل مع البيانات:
التخزين الدائم للبيانات: تُستخدم LocalStorage لتخزين البيانات التي يجب أن تكون متاحة عبر جلسات المتصفح. وقد تكون هذه تفضيلات المستخدم أو الإعدادات أو بيانات التطبيق التي يجب الاحتفاظ بها حتى عندما يغلق المستخدم المتصفح. وكثيرًا ما تُستخدم هذه الوظيفة لتحسين تجربة المستخدم بتذكّر اختياراته وإعداداته.
الوصول دون اتصال: يمكن استخدام LocalStorage لتخزين البيانات اللازمة لتشغيل تطبيق ويب دون اتصال. وهذا يتيح للمستخدمين مواصلة التفاعل مع التطبيق حتى دون اتصال بالإنترنت، ويمكن مزامنة البيانات عند استعادة الاتصال.
حالة التطبيق: يمكن أيضًا استخدام LocalStorage لتخزين الحالة التي يجب الاحتفاظ بها أثناء استخدام المستخدم للتطبيق، مثل البيانات المؤقتة اللازمة للحفاظ على موضع المستخدم في التطبيق. ولا ينبغي تخزين رموز الجلسات والأسرار الأخرى هنا، لأن أي نص برمجي في الصفحة يستطيع قراءتها.
ومن أكبر نقاط قوة LocalStorage بساطتها وسهولة الوصول إليها. فالبيانات تُخزَّن مباشرة في المتصفح، ما يعني أنه يسهل الوصول إليها دون إعدادات خوادم أو قواعد بيانات معقدة. كما أن البيانات لا يمكن الوصول إليها إلا من المصدر الذي خزّنها، ما يقلل خطر الوصول من مواقع أخرى. غير أن LocalStorage غير مشفرة ويمكن قراءتها من أي نص برمجي على المصدر نفسه، لذا لا ينبغي تخزين البيانات الحساسة دون تدابير أمنية إضافية.
وتُعدّ الطبيعة الخفيفة لـ LocalStorage ميزة مهمة أخرى. فهي سريعة وبسيطة الاستخدام للكميات الصغيرة من البيانات. لكن لأن واجهة API متزامنة، فإن عمليات القراءة والكتابة الكبيرة أو المتكررة قد تحجب الخيط الرئيسي للمتصفح، ولهذا تُعدّ IndexedDB خيارًا أفضل للكميات الأكبر من البيانات.
عمليًا، سهّلت LocalStorage بناء تطبيقات ويب بتجارب أكثر استجابة وسهولة في الاستخدام. وهي تُستخدم في كل شيء من تطبيقات الويب البسيطة التي تتذكّر إعدادات المستخدم إلى التطبيقات الأكثر تعقيدًا التي تتطلب العمل دون اتصال والتعامل الدائم مع البيانات.
خلاصة القول، LocalStorage تقنية تجمع بين البساطة والتخزين الدائم للبيانات والكفاءة في حل يجعل تطبيقات الويب أكثر متانة وإتاحة. وقدرتها على العمل دون تفاعل مع الخادم تجعلها أداة مهمة في تطوير الويب الحديث، حيث تُعدّ حلول التعامل السريع والموثوق مع البيانات أمرًا أساسيًا.
Frequently asked questions about LocalStorage
ما هي LocalStorage، وكيف تختلف عن sessionStorage؟
LocalStorage تقنية لتخزين الويب تتيح تخزين البيانات محليًا في متصفح المستخدم دون تاريخ انتهاء صلاحية. وهذا يعني أن البيانات تظل متاحة حتى بعد إغلاق المتصفح وإعادة فتحه، ما يجعلها مثالية لتخزين البيانات الدائمة التي يجب أن تكون متاحة عبر الجلسات.
وعلى عكس LocalStorage، صُممت sessionStorage لتخزين البيانات طوال مدة جلسة صفحة واحدة فقط. فالبيانات في sessionStorage تُحذف تلقائيًا عند إغلاق علامة تبويب المتصفح أو نافذته، ما يجعلها مناسبة للبيانات المؤقتة التي لا تُحتاج إلا أثناء نشاط المستخدم في صفحة أو تطبيق معين.
وكلتا التقنيتين جزء من واجهة Web Storage API، وتقدمان طريقة أكثر كفاءة للتعامل مع البيانات من جانب العميل مقارنة بملفات تعريف الارتباط التقليدية، إذ لا تُرسلان مع كل طلب HTTP. لكنهما ليستا أكثر أمانًا من ملفات تعريف الارتباط من كل النواحي: فعلى عكس ملفات تعريف الارتباط من نوع HttpOnly، يمكن دائمًا قراءة Web Storage عبر JavaScript في الصفحة.
كيف يمكن استخدام LocalStorage لتحسين تجربة المستخدم في تطبيقات الويب؟
LocalStorage تقنية ويب قوية يمكنها تحسين تجربة المستخدم في تطبيقات الويب بتخزين البيانات محليًا على جهاز المستخدم. فهي تتيح الاحتفاظ بالبيانات بشكل دائم، ما يعني أن المعلومات تظل متاحة حتى بعد إغلاق المتصفح أو إعادة تشغيل الحاسوب.
ومن أكبر مزايا LocalStorage أنها تستطيع تقليل الحاجة إلى جلب البيانات من الخادم مرارًا، ما ينتج أوقات تحميل أسرع وتجربة مستخدم أكثر استجابة. فعلى سبيل المثال، يمكن تخزين تفضيلات المستخدم أو الإعدادات أو البيانات المؤقتة محليًا بحيث يتكيف التطبيق مع احتياجات المستخدم دون تأخير.
ومقارنة بـ sessionStorage، التي لا تحتفظ بالبيانات إلا خلال جلسة واحدة، تقدم LocalStorage حلًا أكثر دوامًا مثاليًا للتطبيقات التي يجب فيها الاحتفاظ بالبيانات لفترة أطول. وهذا يجعل LocalStorage خيارًا جيدًا للعمل البسيط دون اتصال، حيث يستطيع المستخدمون مواصلة التفاعل مع التطبيق دون اتصال نشط بالإنترنت.
وعلى عكس ملفات تعريف الارتباط، لا تُرسل LocalStorage تلقائيًا مع كل طلب HTTP، ما يقلل نقل البيانات غير الضروري. غير أن LocalStorage غير مناسبة لتخزين المعلومات الحساسة، إذ يمكن لأي شيفرة JavaScript تعمل في الصفحة الوصول إلى البيانات.
وفي عالم تحتل فيه تجربة المستخدم مكانة قصوى، تتيح LocalStorage للمطورين بناء تطبيقات ويب أسرع وأكثر كفاءة وتخصيصًا يمكنها التكيف مع احتياجات المستخدم وتفضيلاته.
ما الاعتبارات الأمنية التي ينبغي مراعاتها عند استخدام LocalStorage؟
LocalStorage ميزة عملية في متصفحات الويب الحديثة تتيح تخزين البيانات محليًا على جهاز المستخدم. وهي جزء من واجهة Web Storage API، وتستطيع تخزين نحو 5–10 MB من البيانات لكل مصدر، ما يجعلها مناسبة لتخزين تفضيلات المستخدم وحالة التطبيق. غير أن LocalStorage تأتي مع اعتبارات أمنية ينبغي مراعاتها لحماية بيانات المستخدمين.
ومن أبرز المخاوف الأمنية مع LocalStorage أن البيانات تُخزَّن نصًا صريحًا ويمكن الوصول إليها من شيفرة JavaScript تعمل على المصدر نفسه. وهذا يعني أنه إذا تمكن مهاجم من تشغيل شيفرة خبيثة على الموقع، فقد يتمكن من الوصول إلى المعلومات الحساسة المخزنة في LocalStorage. لذلك من المهم تجنب تخزين البيانات الحساسة مثل كلمات المرور أو الرموز أو المعلومات الشخصية في LocalStorage.
كما أن LocalStorage معرضة لهجمات البرمجة النصية عبر المواقع (XSS)، التي يحقن فيها المهاجم شيفرة خبيثة في تطبيق ويب. ولتقليل خطر هجمات XSS، ينبغي للمطورين التأكد من التحقق من صحة جميع المدخلات وتهريب المخرجات بشكل صحيح، واستخدام سياسة أمان المحتوى (CSP) لتقييد النصوص البرمجية التي يمكن تشغيلها في الصفحة.
ومقارنة بإدارة الجلسات من جانب الخادم، حيث تُخزَّن البيانات بأمان على الخادم، تتطلب LocalStorage من المطورين إيلاء اهتمام إضافي لممارسات الأمان. وتستحق البدائل مثل ملفات تعريف الارتباط الخاصة بالجلسة النظر فيها، إذ يمكن جعلها أكثر أمانًا بسمات مثل HttpOnly و Secure و SameSite.
كيف تُخزَّن بيانات JSON في LocalStorage وتُسترجع منها؟
LocalStorage جزء من واجهة Web Storage API، وهي مناسبة جدًا لتخزين كميات صغيرة من بيانات JSON، بسعة تبلغ نحو 5 MB لكل مصدر.
ولتخزين بيانات JSON في LocalStorage، يجب أولًا تحويل البيانات إلى سلسلة نصية، إذ لا تستطيع LocalStorage تخزين البيانات إلا نصًا. ويتم ذلك بالتابع JSON.stringify()، الذي يحوّل كائن JavaScript إلى سلسلة JSON. وبعد التحويل، يمكن تخزين البيانات بالتابع localStorage.setItem()، مع تحديد مفتاح والسلسلة المراد تخزينها.
ولاسترجاع بيانات JSON من LocalStorage، يُستخدم التابع localStorage.getItem()، الذي يعيد السلسلة المخزنة للمفتاح المحدد. ثم يمكن تحويل السلسلة مجددًا إلى كائن JavaScript بالتابع JSON.parse(). وهذا يتيح العمل مع البيانات بصيغتها الأصلية.
ومقارنة بـ sessionStorage، التي لا تحتفظ بالبيانات إلا حتى إغلاق علامة التبويب، تُعدّ LocalStorage حلًا أكثر دوامًا مثاليًا للتطبيقات التي تحتاج إلى الاحتفاظ بالبيانات لفترة أطول. ومن المهم ملاحظة أن LocalStorage غير مناسبة لتخزين البيانات الحساسة، إذ إنها غير مشفرة ويمكن لجميع النصوص البرمجية العاملة على المصدر نفسه الوصول إليها.
ما الحدود المعتادة لكمية البيانات التي يمكن تخزينها في LocalStorage؟
من القيود المعتادة لـ LocalStorage كمية البيانات التي يمكن تخزينها.
تضع معظم المتصفحات الحديثة حدًا يبلغ نحو 5 MB لكل مصدر، ما يعني أن تطبيق الويب يستطيع تخزين ما يصل إلى نحو 5 MB من البيانات في LocalStorage لكل تركيبة من البروتوكول والنطاق والمنفذ. ويُوضع هذا الحد لمنع تطبيق ويب واحد من استخدام قدر كبير جدًا من مساحة التخزين المحلية لدى المستخدم، ما قد يؤثر في أداء المتصفح.
ومقارنة بخيارات التخزين الأخرى مثل IndexedDB، التي تقدم مرونة أكبر وسعة تخزين أعلى، تُعدّ LocalStorage محدودة في الحجم والوظائف معًا. ومع ذلك تظل LocalStorage خيارًا شائعًا لاحتياجات التخزين البسيطة، إذ يسهل تطبيقها والوصول إليها ولا تتطلب أي إعداد إضافي أو أذونات من المستخدم.
كيف يمكن مسح بيانات محددة أو حذفها من LocalStorage؟
صُممت LocalStorage لتكون دائمة، ما يعني أن البيانات تظل مخزنة حتى بعد إغلاق المتصفح. وتُعدّ LocalStorage مفيدة بشكل خاص لتخزين تفضيلات المستخدم أو بيانات التطبيق التي لا تتطلب تخزينًا على الخادم.
يمكن مسح بيانات محددة أو حذفها من LocalStorage باستخدام توابع JavaScript بسيطة وفعالة. فلحذف زوج محدد من المفتاح والقيمة، يُستخدم التابع removeItem()، الذي يأخذ اسم المفتاح المراد إزالته. فعلى سبيل المثال، إذا خُزّن تفضيل للمستخدم تحت المفتاح 'userTheme'، يمكن حذفه باستدعاء localStorage.removeItem('userTheme').
ولمسح جميع البيانات من LocalStorage، يُستخدم التابع clear()، الذي يزيل جميع المفاتيح والقيم المخزنة في LocalStorage لذلك المصدر. وقد يكون ذلك مفيدًا لإعادة تعيين حالة التطبيق أو حذف جميع بيانات المستخدم عند تسجيل الخروج. استدعوا ببساطة localStorage.clear() لتنفيذ هذا الإجراء.
ومقارنة بـ sessionStorage، التي لا تحتفظ بالبيانات إلا خلال جلسة واحدة وتُحذف عند إغلاق علامة التبويب، تُعدّ LocalStorage أكثر دوامًا، ولذلك تتطلب حذفًا يدويًا عندما لا تعود البيانات مطلوبة. وهذا يجعلها أداة قوية لمطوري الويب الذين يريدون تحسين تجربة المستخدم بتخزين البيانات محليًا.
LocalStorage for dummies
LocalStorage ميزة ذكية في متصفحات الويب تتيح للمواقع تخزين أجزاء صغيرة من المعلومات مباشرة على الحاسوب. فكّروا فيها كدفتر ملاحظات رقمي صغير تستطيع المواقع أن تدوّن فيه ما تريد تذكّره للزيارة التالية. فعلى سبيل المثال، يستطيع متجر إلكتروني تخزين ما وُضع في سلة التسوق، بحيث يظل موجودًا عندما يعود العميل لاحقًا. وهي طريقة سهلة وسريعة تتيح للمواقع تذكّر التفضيلات وجعل التجربة أكثر تخصيصًا، دون الحاجة إلى تسجيل الدخول أو إنشاء حساب. ولا تعمل LocalStorage إلا على الجهاز والمتصفح المستخدمين، ولا يرى كل موقع إلا بياناته الخاصة، لكنها غير مشفرة، لذا لا ينبغي أن تحتوي أبدًا على معلومات حساسة.