Local Storage
التخزين المحلي (localStorage)
Definition
Browser API for storing key-value string data that persists across page reloads and browser sessions.
واجهة برمجة المتصفح لتخزين بيانات مفتاح-قيمة نصية تظل بعد إعادة تحميل الصفحة وجلسات المتصفح.
Why It Matters
Theme preference (dark/light) is typically stored in localStorage. Language preference can be too. Critically, authentication tokens should use secure HttpOnly cookies instead.
تفضيل السمة (داكن/فاتح) يُخزَّن عادةً في localStorage. يمكن تخزين تفضيل اللغة أيضًا. الأهم: رموز المصادقة يجب استخدام كوكيز آمنة HttpOnly بدلاً من ذلك.
Full Definition
Example Usage
“const savedTheme = typeof window !== 'undefined' ? localStorage.getItem('theme') : null;”
“const savedTheme = typeof window !== 'undefined' ? localStorage.getItem('theme') : null;”
AI Builder Tips
Avoid these mistakes when using Local Storage:
Storing auth tokens in localStorage — vulnerable to XSS attacks
Accessing localStorage during SSR — use `typeof window !== 'undefined'` check or useEffect
Sign in to unlock guided AI explanations from AI Teacher.
Generate a Prompt
Copy this prompt and use it directly with any AI model — no setup needed.
Help me build a project using Local Storage. Explain: 1. What is Local Storage and why it matters 2. The core architecture and required tools 3. Step-by-step implementation plan 4. Common mistakes to avoid: Storing auth tokens in localStorage — vulnerable to XSS attacks, Accessing localStorage during SSR — use `typeof window !== 'undefined'` check or useEffect 5. Best practices and production tips