Blazor - استخدام Protected Browser Storage

🔹 7.3 Blazor - استخدام Protected Browser Storage

عند استخدام خدمات Singleton أو تخزين الحالة داخل المكونات، يتم فقدان البيانات عند تحديث الصفحة (Refresh). ولحل هذه المشكلة، يمكننا استخدام Protected Browser Storage لحفظ البيانات داخل متصفح المستخدم بشكل آمن.

---

🧠 ما هو ProtectedBrowserStorage؟

هي خدمة توفرها Blazor Server لحفظ البيانات في Session Storage أو Local Storage، مع تشفير البيانات لضمان الحماية والأمان.

---

🛠️ خطوات استخدام Protected Browser Storage

✅ 1. إضافة التوجيه في رأس المكون

@inject ProtectedLocalStorage localStorage

✅ 2. حفظ بيانات

await localStorage.SetAsync("userName", "Mahmoud");

✅ 3. قراءة بيانات

var result = await localStorage.GetAsync<string>("userName");
string? name = result.Success ? result.Value : null;

---

🎯 الفرق بين LocalStorage و SessionStorage

• ProtectedLocalStorage: تبقى البيانات محفوظة حتى بعد إغلاق المتصفح.
• ProtectedSessionStorage: يتم حذف البيانات بمجرد إغلاق نافذة المتصفح.

يمكنك استبدال ProtectedLocalStorage بـ ProtectedSessionStorage بنفس الطريقة.

---

💡 ملاحظات مهمة

• هذه الخدمة متاحة في Blazor Server فقط.
• يتم تشفير البيانات تلقائيًا باستخدام Data Protection API في الخادم.
• يمكن استخدامها لحفظ بيانات المستخدم، حالة تسجيل الدخول، إعدادات الواجهة، إلخ.

---

✅ مثال كامل لحفظ واسترجاع اسم المستخدم

@inject ProtectedLocalStorage localStorage

<input @bind="userName" placeholder="ادخل اسمك" class="form-control" />
<button class="btn btn-primary mt-2" @onclick="SaveName">💾 حفظ الاسم</button>
<button class="btn btn-secondary mt-2 ms-2" @onclick="LoadName">📥 تحميل الاسم</button>

<p class="mt-3">مرحبًا @loadedName</p>

@code {
    private string? userName;
    private string? loadedName;

    async Task SaveName()
    {
        await localStorage.SetAsync("userName", userName);
    }

    async Task LoadName()
    {
        var result = await localStorage.GetAsync<string>("userName");
        if (result.Success)
            loadedName = result.Value;
    }
}

---

✅ خلاصة الدرس

ProtectedBrowserStorage طريقة آمنة وفعالة لتخزين البيانات في متصفح المستخدم في تطبيقات Blazor Server. وهي مفيدة لتجاوز فقدان البيانات عند تحديث الصفحة أو إعادة فتح التطبيق.

---

✅ انتهى قسم إدارة الحالة

أصبحت الآن ملمًا بثلاث طرق لإدارة الحالة في Blazor:

1. تخزين محلي داخل المكون
2. خدمة Singleton
3. التخزين الآمن في المتصفح