DevGuide 🇵🇸

أهم بدائل الـ localStorage 💡
.
.
خلال رحلتك في عالم الـ Front-End لازم في وقت من الأوقات هتحتاج تخزن بيانات عند الـ Client Side (يعني عند المستخدم).

أبسط حاجة كلنا عرفناها في الأول هي الـ localStorage. سهلة جدًا والكود بسيط، وكمان عبارة عن key/value، بس الحقيقة إن localStorage مش دايمًا أحسن حل.

ليه؟ 👇

- الـ size محدود (تقريبًا 5MB).
- كل حاجة بتتخزن كـ string.
- مفيهاش أي نوع من الـ security (ممكن أي حد يقرأها).
- مش scalable لو بتتعامل مع data كبيرة.

علشان كده تعال ندردش شوية عن 4 بدائل للـ localStorage ممكن تساعدك في بعض السيناريوهات المختلفة...

———

📌 الـ IndexedDB

- دي عبارة عن database كاملة داخل الـ browser.
- بتخليك تخزن structured data (objects، arrays…) مش مجرد strings.
- بتتعامل معاها عن طريق APIs أو libraries زي Dexie.js عشان تسهّل الموضوع.
- مناسبة جدًا لو عندك data كبيرة أو offline apps زي Note Apps أو Todo Apps.
- أسرع بكتير في الـ queries من localStorage.

———

📌 الـ sessionStorage

- نفس فكرة localStorage بالضبط لكن الفرق إنها بتتمسح أول ما الـ tab تتقفل.
- مناسبة لحاجات temporary زي tokens أثناء الـ session أو data مش مهمة تحتفظ بها بعد ما اليوزر يقفل الصفحة.
- حجمها برضه محدود زي localStorage.

———

📌 الـ Cookies

- أقدم وأشهر طريقة لتخزين البيانات في الـ browser.
- ميزتها إنها بتتبعت تلقائي مع كل HTTP Request للـ server.
- مناسبة جدًا للـ authentication (زي الـ JWT tokens أو session IDs).
- بس عيبها إنها صغيرة (حوالي 4KB) وأي data زيادة ممكن تقلل سرعة الـ requests.
- لازم تستخدمها للحاجات الخفيفة والمهمة بس.

———

📌 الـ Service Workers + Cache API

- ده حل advanced شوية، بيستخدم الـ Service Workers مع Cache API.
- بيخليك تخزن responses كاملة من الـ network (زي HTML, CSS, JS, Images).
- ممتاز للـ Progressive Web Apps (PWA) عشان تشتغل offline.
- تقدر تتحكم في caching strategy (مثلًا: Network First, Cache First…).
- مفيد جدًا للأداء (performance) وتحسين تجربة المستخدم.

———

💡 الخلاصة:

- لو data كبيرة: استخدم IndexedDB.
- لو data بسيطة ومؤقتة: sessionStorage.
- لو عايز data تتبعت للـ server: استخدم Cookies.
- لو بتبني PWA أو محتاج caching قوي: استخدم Service Workers + Cache API.

فكر دايمًا قبل ما تستخدم localStorage: هل هو فعلًا الحل المناسب؟ ولا في بديل أفضل يساعدك من ناحية الأداء والأمان؟

———

وفقكم الله لكل خير 🌿

❤13👏1🤣1

www.tgoop.com/the_developer_guide/5639

640 viewsSep 19 at 12:01

أهم بدائل الـ localStorage 💡
.
.
خلال رحلتك في عالم الـ Front-End لازم في وقت من الأوقات هتحتاج تخزن بيانات عند الـ Client Side (يعني عند المستخدم).

أبسط حاجة كلنا عرفناها في الأول هي الـ localStorage. سهلة جدًا والكود بسيط، وكمان عبارة عن key/value، بس الحقيقة إن localStorage مش دايمًا أحسن حل.

ليه؟ 👇

- الـ size محدود (تقريبًا 5MB).
- كل حاجة بتتخزن كـ string.
- مفيهاش أي نوع من الـ security (ممكن أي حد يقرأها).
- مش scalable لو بتتعامل مع data كبيرة.

علشان كده تعال ندردش شوية عن 4 بدائل للـ localStorage ممكن تساعدك في بعض السيناريوهات المختلفة...

———

📌 الـ IndexedDB

- دي عبارة عن database كاملة داخل الـ browser.
- بتخليك تخزن structured data (objects، arrays…) مش مجرد strings.
- بتتعامل معاها عن طريق APIs أو libraries زي Dexie.js عشان تسهّل الموضوع.
- مناسبة جدًا لو عندك data كبيرة أو offline apps زي Note Apps أو Todo Apps.
- أسرع بكتير في الـ queries من localStorage.

———

📌 الـ sessionStorage

- نفس فكرة localStorage بالضبط لكن الفرق إنها بتتمسح أول ما الـ tab تتقفل.
- مناسبة لحاجات temporary زي tokens أثناء الـ session أو data مش مهمة تحتفظ بها بعد ما اليوزر يقفل الصفحة.
- حجمها برضه محدود زي localStorage.

———

📌 الـ Cookies

- أقدم وأشهر طريقة لتخزين البيانات في الـ browser.
- ميزتها إنها بتتبعت تلقائي مع كل HTTP Request للـ server.
- مناسبة جدًا للـ authentication (زي الـ JWT tokens أو session IDs).
- بس عيبها إنها صغيرة (حوالي 4KB) وأي data زيادة ممكن تقلل سرعة الـ requests.
- لازم تستخدمها للحاجات الخفيفة والمهمة بس.

———

📌 الـ Service Workers + Cache API

- ده حل advanced شوية، بيستخدم الـ Service Workers مع Cache API.
- بيخليك تخزن responses كاملة من الـ network (زي HTML, CSS, JS, Images).
- ممتاز للـ Progressive Web Apps (PWA) عشان تشتغل offline.
- تقدر تتحكم في caching strategy (مثلًا: Network First, Cache First…).
- مفيد جدًا للأداء (performance) وتحسين تجربة المستخدم.

———

💡 الخلاصة:

- لو data كبيرة: استخدم IndexedDB.
- لو data بسيطة ومؤقتة: sessionStorage.
- لو عايز data تتبعت للـ server: استخدم Cookies.
- لو بتبني PWA أو محتاج caching قوي: استخدم Service Workers + Cache API.

فكر دايمًا قبل ما تستخدم localStorage: هل هو فعلًا الحل المناسب؟ ولا في بديل أفضل يساعدك من ناحية الأداء والأمان؟

———

وفقكم الله لكل خير 🌿

BY DevGuide 🇵🇸