Cookies

الـ Cookies هي ملفات صغيرة المتصفح بيخزنها عندك في الـbrowser عشان يفتكر المعلومات دي عنك بعدين لما تزور نفس الموقع.
بتتبعت مع كل HTTP Request، وده معناه إنها بتاخد مساحة إضافية مع كل ريكوست.
حجم كل Cookie بيبقى محدود (عادةً 4KB)، وعشان كده بنستخدمها لتخزين البيانات اللي محتاجينها مع كل ريكوست زي معلومات الSessions.
تقدر تحدد مده الـ Cookie عشان تتمسح بعد فترة معينة، لكن لو مفيش وقت محدد هتفضل موجودة لحد ما المستخدم يمسحها بنفسه.

LocalStorage

بتخزن البيانات على جهاز المستخدم في الـbrowser، وبتفضل موجودة حتى لو قفل الـbrowser وفتحه تاني.
ميزتها إنها بتخزن بيانات بحجم أكبر من الـ Cookies (تقريباً لحد 5 ميجابايت)
البيانات اللي بتتخزن فيها مش بتتبعت للسيرفر مع كل ريكوست، وده بيخليها مناسبة لحاجات زي تغيير اللغة أو الدارك مود.

SessionStorage

شبه الـ LocalStorage في إنها بتخزن البيانات على جهاز المستخدم
لكن الفرق إن البيانات دي بتفضل موجودة بس طول ما الSession شغالة،يعني طول ما انت فاتح الtab بتاع الموقع.
أول ما المستخدم يقفل الtab دي، كل البيانات بتتمسح لوحدها.
زي الـ LocalStorage برضه في ان البيانات اللي في SessionStorage مش بتتبعت للسيرفر مع كل ريكوست.

الفرق الأساسي بينهم:

Cookies: بتستخدم لتتبع البيانات في كل الtabs اللي فاتحها المستخدم في الـbrowser، وبتتبعت مع كل HTTP Request للسيرفر.
LocalStorage: بتخزن بيانات أكبر على الجهاز وبتفضل موجودة حتى بعد ما المستخدم يقفل الـbrowser.
SessionStorage: بتخزن البيانات على الجهاز لكن بتتمسح أول ما المستخدم يقفل الـbrowser أو الtab بتاع الموقع.

الفرق بينهم في الحماية:

Cookies: مش آمنة بشكل كبير لأنها بتتبعت مع كل طلب HTTP للسيرفر، وده ممكن يعرضها لattacks .d Cross-Site Scripting (XSS) وCross-Site Request Forgery (CSRF).

LocalStorage وSessionStorage: الاتنين بيخزنوا البيانات على الـbrowser، وبالتالي مش بتتبعت البيانات مع كل طلب HTTP، بس ممكن برضه يتعرضوا لXSS Attacks .

إمتى تستخدم كل واحدة؟

Cookies: لما بتحتاج تتبع بيانات في tabs مختلفة أو مواقع مختلفة، زي اللوجين مثلا.
LocalStorage: لما بتحتاج تخزن بيانات كبيرة نسبيًا والبيانات دي مش لازم تبعت للسيرفر مع كل ريكوست.
SessionStorage: لما تحتاج تخزن بيانات مؤقتة أثناء الSession وتتمسح لما تقفل الtab