Local Storage

التخزين المحلي (localStorage)

Beginnerprogramming1 min read
localstoragebrowser storageweb storagesessionstorageclient storage

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

localStorage is a browser API that stores string key-value pairs with no expiry. Data persists across browser sessions until explicitly cleared. Must be accessed only client-side (throws in SSR). 404Fault uses localStorage minimally — user preferences like theme are stored there. Sensitive data (tokens, user IDs) should NEVER be stored in localStorage due to XSS vulnerability.
localStorage واجهة برمجة متصفح تخزّن أزواج مفتاح-قيمة نصية بدون انتهاء صلاحية. تظل البيانات بين جلسات المتصفح حتى تُمسح صراحةً. يجب الوصول إليها من جانب العميل فقط (تتسبب في خطأ في SSR).

Example Usage

const savedTheme = typeof window !== 'undefined' ? localStorage.getItem('theme') : null;

const savedTheme = typeof window !== 'undefined' ? localStorage.getItem('theme') : null;

Knowledge Graph

Avoid these mistakes when using Local Storage:

1

Storing auth tokens in localStorage — vulnerable to XSS attacks

2

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.

Ready-to-Use Prompt
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

Official Resources