یکی از ویژگی های حیاتی برنامه های کاربردی وب مدرن، توانایی آنها برای ذخیره و بازیابی داده ها در سمت مشتری است. اینجا جایی است که حافظه محلی وارد عمل می شود.

در این مقاله، نحوه استفاده از قدرت بسته Blazored LocalStorage NuGet را برای ادغام یکپارچه قابلیت‌های local storage در برنامه‌های Blazor شما تحلیل خواهیم کرد.

فهرست مطالب

پیش نیازها

درک محل ذخیره سازی

معرفی Blazored.LocalStorage

مزایای استفاده از Blazored.LocalStorage در برنامه های Blazor

نحوه نصب Blazored.LocalStorage

با استفاده از Nuget Package Manager نصب کنید

با استفاده از NET CLI نصب کنید

نحوه استفاده از Blazored.LocalStorage

ویژگی ها و تکنیک های پیشرفته

نتیجه

پیش نیازها

قبل از ادامه این راهنما، مطمئن شوید که ابزارهای لازم را روی رایانه خود نصب کرده اید:

برای ساخت و به‌روزرسانی پروژه‌های Blazor ، به Visual Studio ، یک محیط توسعه یکپارچه (IDE) با آپشن های غنی نیاز دارید که می‌توانید آن را از وب‌سایت رسمی مایکروسافت از اینجا دانلود کنید.

NET SDK (کیت توسعه نرم‌افزار) همه چیزهایی را که برای ایجاد و اجرای برنامه‌های دات‌نت نیاز دارید، دارد و برای پروژه‌های Blazor مورد نیاز است. مطمئن شوید که کامپیوتر شما .NET SDK را نصب کرده است.

دانش اولیه C# و Blazor.

با نصب این ها، آماده پیگیری خواهد بود.

درک محل ذخیره سازی

ذخیره سازی محلی یک مکانیسم ذخیره سازی جفت key-value است که توسط مرورگرهای وب مدرن پشتیبانی می شود. این یک راه ساده برای ذخیره دائمی داده ها در دستگاه کاربر ارائه می دهد. برخلاف session storage ، که با پایان جلسه مرورگر پاک می‌شود، local storage حتی پس از بستن پنجره مرورگر دست نخورده باقی می‌ماند.

Blazored.LocalStorage یک کتابخانه قدرتمند است که کار با API ذخیره سازی محلی مرورگر (Application Programming Interface) را در برنامه های Blazor ساده می کند. این یک API مناسب برای ذخیره، بازیابی و مدیریت داده ها در حافظه محلی ارائه می دهد.

این بسته با حذف پیچیدگی‌های تعامل مستقیم با localStorage API، یک رابط بصری و ایمن را ارائه می‌کند. این به شما امکان می‌دهد بدون نگرانی در مورد مکانیسم‌های ذخیره‌سازی زیربنایی، روی ساخت برنامه‌های Blazor غنی از ویژگی‌ها تمرکز کنید.

معرفی Blazored.LocalStorage

Blazored.LocalStorage یک کتابخانه منبع باز است که برای ارائه مدیریت ذخیره سازی محلی آسان و قابل دسترس در برنامه های Blazor طراحی شده است. این کتابخانه با هر دو پروژه Blazor WebAssembly و Blazor Server سازگار است. این آن را به یک انتخاب همه کاره برای توسعه دهندگان Blazor تبدیل می کند که به دنبال بهبود برنامه های خود با قابلیت های ذخیره سازی مداوم و سمت مشتری هستند.

Blazored.LocalStorage در هسته خود ذخیره و بازیابی داده ها را در حافظه محلی مرورگر تسهیل می کند و به داده ها اجازه می دهد تا در جلسات مرورگر باقی بمانند.

این به ویژه برای ذخیره تنظیمات برگزیده کاربر، وضعیت برنامه و سایر داده هایی که باید بین بارگذاری مجدد صفحه بدون نیاز به پایگاه داده یا راه حل ذخیره سازی Backend باقی بمانند مفید است.

مزایای استفاده از Blazored.LocalStorage در برنامه های Blazor

گنجاندن Blazored.LocalStorage در برنامه های Blazor دارای مزایای زیادی است، از جمله:

مدیریت حالت ساده: با استفاده از فضای ذخیره‌سازی محلی، برنامه‌ها می‌توانند وضعیت را به طور مؤثرتری در طول جلسات کاربر حفظ کنند و تجربه کاربر را افزایش دهند.

بهبود عملکرد: ذخیره سازی داده ها به صورت محلی نیاز به درخواست های مکرر سرور را کاهش می دهد که منجر به عملکرد سریعتر برنامه و کاهش بار سرور می شود.

تجربه کاربری پیشرفته: تنظیمات برگزیده و حالت های برنامه را می توان حفظ کرد، به این معنی که کاربران نیازی به پیکربندی مجدد تنظیمات یا از دست دادن جایگاه خود در برنامه پس از بازگشت ندارند.

یکپارچه سازی آسان: API ارائه شده توسط Blazored.LocalStorage به گونه ای طراحی شده است که بصری و ساده باشد و اطمینان حاصل کند که توسعه دهندگان می توانند با کمترین تلاش، قابلیت های ذخیره سازی محلی را در برنامه های خود ادغام کنند.

تداوم جلسات متقابل: برخلاف ذخیره‌سازی جلسه یا ذخیره‌سازی داده‌های درون حافظه، ذخیره‌سازی محلی تضمین می‌کند که داده‌ها در طول جلسات مرورگر و بسته شدن برگه‌ها باقی می‌مانند و تجربه کاربری سازگارتری را ارائه می‌دهند.

نحوه نصب Blazored.LocalStorage

ادغام Blazored.LocalStorage در پروژه Blazor شما با پشتیبانی از نصب از طریق NuGet Package Manager یا .NET CLI (مترجم خط فرمان) ساده است.

با استفاده از NuGet Package Manager نصب کنید

با استفاده از Visual Studio ، می توانید به راحتی Blazored.LocalStorage را با دنبال کردن این مراحل اضافه کنید:

پروژه Blazor خود را در ویژوال استودیو باز کنید.

به "Solution Explorer" بروید، روی "Dependencies" کلیک راست کرده و "Manage NuGet Packages" را انتخاب کنید.

در NuGet Package Manager، روی تب “Browse” کلیک کنید و “Blazored.LocalStorage” را جستجو کنید.

بسته را در فهرست پیدا کنید، آن را انتخاب کنید و روی "نصب" کلیک کنید.

ویژوال استودیو بقیه موارد را انجام می دهد و بسته را به همراه هر وابستگی به پروژه شما اضافه می کند.

با استفاده از NET CLI نصب کنید

برای کسانی که ترجیح می دهند از خط فرمان استفاده کنند یا در محیط توسعه ای غیر از ویژوال استودیو کار می کنند، .NET CLI یک روش ساده برای اضافه کردن Blazored.LocalStorage ارائه می دهد:

 dotnet add package Blazored.LocalStorage

دستور بالا را در terminal یا command prompt از دایرکتوری ریشه پروژه Blazor خود اجرا کنید. CLI Blazored.LocalStorage همراه با هر وابستگی لازم دانلود و نصب می کند.

نحوه استفاده از Blazored.LocalStorage

بیایید به چند نمونه اساسی از استفاده از Blazored.LocalStorage در برنامه Blazor بپردازیم.

چگونه Blazored.LocalStorage را در برنامه Blazor خود ثبت کنید

ما Blazored.LocalStorage در ریشه برنامه ثبت می کنیم، به طوری که برای استفاده در همه جای برنامه در دسترس خواهد بود.

در فایل program.cs که فایل اصلی ماست، سرویس Blazored.LocalStorage را با انجام کارهای زیر ثبت می کنیم:

 builder.Services.AddBlazoredLocalStorage();

قطعه کد بالا Blazored.LocalStorage در برنامه ثبت می کند. برای اینکه این کار انجام شود، مطمئن شوید که کد زیر را به بالای فایل program.cs اضافه کرده اید:

 using Blazored.LocalStorage;

قطعه کد بالا مطمئن می شود که Blazored.LocalStorage برای استفاده در فایل وارد شده است. اگر همه چیز را به درستی اضافه کرده اید، فایل program.cs شما باید به شکل زیر باشد:

 using BlazorApp9.Components; using Blazored.LocalStorage; namespace BlazorApp9; public class Program { public static void Main(string[] args) { var builder = WebApplication.CreateBuilder(args); builder.Services.AddRazorComponents() .AddInteractiveServerComponents(); builder.Services.AddBlazoredLocalStorage(); var app = builder.Build(); if (!app.Environment.IsDevelopment()) { app.UseExceptionHandler("/Error"); app.UseHsts(); } app.UseHttpsRedirection(); app.UseStaticFiles(); app.UseAntiforgery(); app.MapRazorComponents<App>() .AddInteractiveServerRenderMode(); app.Run(); } }

کد بالا کد کاملی است که باید در فایل program.cs شما باشد. با استفاده از این، اکنون می توانید از Blazored.LocalStorage در هر نقطه از برنامه برای ذخیره و دریافت داده ها استفاده کنید.

نحوه ذخیره و بازیابی داده ها در Blazored.LocalStorage

بیایید یک سناریوی ساده را در نظر بگیریم که در آن می‌خواهیم بخشی از داده را با استفاده از ذخیره‌سازی محلی ذخیره و بازیابی کنیم. ما یک صفحه Blazor با دو دکمه ایجاد می کنیم: یکی برای ذخیره داده ها و دیگری برای بازیابی آنها.

 @page "/" @inject Blazored.LocalStorage.ILocalStorageService localStorage @rendermode RenderMode.InteractiveServer <h3>Local Storage Example</h3> <input @bind-value="@inputData" /> <button @onclick="StoreData">Store Data</button> <button @onclick="RetrieveData">Retrieve Data</button> <p>The retrieved data from the LocalStorage: @storedData </p> @code { private const string dataKey = "localStorageKey"; private string? storedData; private string? inputData; private async Task StoreData() { if(!string.IsNullOrWhiteSpace(inputData)) { await localStorage.SetItemAsync(dataKey, inputData); inputData = ""; } } protected override async Task OnAfterRenderAsync(bool firstRender) { if (firstRender) { await RetrieveData(); } } private async Task RetrieveData() { storedData = await localStorage.GetItemAsync<string>(dataKey); } }

در قطعه کد بالا، @inject Blazored.LocalStorage.ILocalStorageService localStorage سرویس ذخیره سازی محلی را برای تعامل با حافظه محلی مرورگر تزریق می کند. @rendermode RenderMode.InteractiveServer مشخص می کند که صفحه باید به عنوان یک مؤلفه تعاملی سمت سرور ارائه شود. بدون سرور تعاملی، صفحه تعاملی نخواهد بود.

فیلد ورودی با استفاده از ویژگی @bind-value به inputData متصل می‌شود و به کاربران اجازه می‌دهد داده‌هایی را که می‌خواهند ذخیره کنند، وارد کنند. dataKey یک متغیر ثابت است که برای ذخیره و بازیابی داده ها از حافظه محلی استفاده می شود. متغیرهای storedData و inputData برای نگهداری داده هایی که قرار است ذخیره و بازیابی شوند استفاده می شود.

روش StoreData تحلیل می کند که آیا inputData خالی نیست. اگر نه، آن را با استفاده از dataKey در حافظه محلی ذخیره می‌کند و قسمت ورودی را پاک می‌کند.

OnAfterRenderAsync پس از اولین رندر مؤلفه فعال می شود. داده‌ها را از حافظه محلی بازیابی می‌کند تا اطمینان حاصل کند که داده‌ها حتی پس از بارگیری مجدد صفحه باقی می‌مانند.

RetrieveData داده ها را از حافظه محلی بازیابی می کند و برای نمایش به storedData اختصاص می دهد.

ویدیوی بالا نحوه ذخیره و بازیابی داده های ذخیره شده در محلی را در سمت سرویس گیرنده توضیح می دهد.

ویژگی ها و تکنیک های پیشرفته

در این بخش، در مورد اینکه چگونه می توانید تاریخ انقضا را برای داده های خود تعیین کنید و اینکه چگونه داده های ذخیره شده را می توان برای امنیت رمزگذاری و رمزگشایی کرد، صحبت خواهیم کرد.

نحوه مدیریت انقضای داده های ذخیره شده

برای مدیریت انقضای داده های ذخیره شده خود، یک کلاس کمکی ایجاد می کنید که داده ها را همراه با مهر زمان انقضا ذخیره می کند. فایلی به نام StorageItem.cs ایجاد کنید که حاوی کد زیر باشد:

 public class StorageItem<T> { public required T Data { get; set; } public DateTime Expiry { get; set; } }

قطعه کد بالا یک کلاس StorageItem<T> است، که یک کلاس عمومی است که می‌تواند داده‌هایی از هر نوع T و تاریخ انقضا DateTime در خود نگه دارد. هنگامی که نمونه ای از StorageItem ایجاد یا مقداردهی اولیه می شود، باید ویژگی Data تنظیم شود و اطمینان حاصل شود که همیشه مقدار معتبری دارد. ویژگی Expiry تاریخ انقضای داده های ذخیره شده را نشان می دهد.

در مرحله بعد، فایلی ایجاد می‌کنید که کلاسی است که حاوی روش‌هایی برای تنظیم و دریافت از LocalStorage، با زمان انقضا است. فایلی به نام LocalStorageHelper.cs ایجاد کنید:

 using Blazored.LocalStorage; namespace BlazorApp9.Components.Helpers; public static class LocalStorageHelper { public static async Task SetItemAsyncWithExpiry<T>(ILocalStorageService localStorageService, string key, TimeSpan expiry, T data) { StorageItem<T> storageItem = new StorageItem<T> { Data = data, Expiry = DateTime.UtcNow.Add(expiry) }; await localStorageService.SetItemAsync(key, storageItem); } public static async Task<T?> GetItemAsyncWithExpiry<T>(ILocalStorageService localStorageService, string key) { var storageItem = await localStorageService.GetItemAsync<StorageItem<T>>(key); if(storageItem is null) { return default; } if (storageItem.Expiry < DateTime.UtcNow) { await localStorageService.RemoveItemAsync(key); return default; } return storageItem.Data; } }

در کد بالا می توانید دستورالعمل using از کتابخانه Blazored.LocalStorage را مشاهده کنید. این امکان دسترسی آسان به حافظه محلی مرورگر را از برنامه های Blazor فراهم می کند.

به دنبال آن فضای نام BlazorApp9.Components.Helpers اعلام می شود. این کد را سازماندهی می کند و نشان می دهد که این کمک کننده بخشی از کمک کننده های یک جزء خاص در برنامه Blazor است.

در مرحله بعد، کلاس LocalStorageHelper به عنوان یک کلاس static تعریف می شود. کلاس ایستا کلاسی است که نمی تواند نمونه سازی شود و فقط می تواند شامل اعضای ایستا باشد (استفاده از روش ها یا ویژگی های غیر ایستا پذیرفته نمی شود).

در کلاس LocalStorageHelper ، دو روش static ناهمزمان تعریف شده است: SetItemAsyncWithExpiry و GetItemAsyncWithExpiry .

متد SetItemAsyncWithExpiry مسئول ذخیره یک مورد در حافظه محلی با زمان انقضای مرتبط است. یک نمونه ILocalStorageService برای تعامل با حافظه محلی، یک string key برای شناسایی آیتم ذخیره شده، یک مقدار TimeSpan که نشان دهنده مدت زمان انقضا است، و داده های واقعی ذخیره شده را می پذیرد.

در داخل متد، یک شیء StorageItem<T> ایجاد می شود که در آن T نوع داده ای است که ذخیره می شود. این شی شامل داده ها و زمان انقضا است که با گفت ن TimeSpan مشخص شده به زمان فعلی UTC محاسبه می شود.

سپس این شی StorageItem با استفاده از روش SetItemAsync ILocalStorageService در حافظه محلی تحت کلید داده شده سریال می شود و ذخیره می شود.

متد GetItemAsyncWithExpiry مسئول بازیابی یک آیتم از حافظه محلی و تحلیل اینکه آیا منقضی شده است یا خیر. همچنین یک نمونه ILocalStorageService و یک string key را می پذیرد.

این روش تلاش می کند تا شی ذخیره شده StorageItem<T> را با استفاده از key بازیابی کند. اگر آیتم بازیابی شده null باشد، مقدار پیش فرض را برای نوع T برمی گرداند ( null برای انواع مرجع تهی و برای انواع مقادیر صفر یا معادل آن).

اگر موردی پیدا شد اما زمان انقضای آن زودتر از زمان فعلی UTC باشد، به این معنی است که کالا منقضی شده است. در این حالت، مورد با استفاده از روش RemoveItemAsync ILocalStorageService از حافظه محلی حذف می‌شود و این روش مقدار پیش‌فرض T را برمی‌گرداند. اگر مورد معتبر باشد و منقضی نشده باشد، متد داده های ذخیره شده را برمی گرداند.

نحوه پیاده سازی رمزگذاری و رمزگشایی

در این بخش، ما یک فایل کاربردی را تحلیل می کنیم که قابلیت های رمزگذاری و رمزگشایی را برای یک برنامه Blazor فراهم می کند.

کلاس EncryptionHelper.cs شامل متدهایی برای رمزگذاری و رمزگشایی رشته ها و همچنین روش هایی برای سریال سازی اشیاء به JSON (جاوا اسکریپت Object Notation) و سپس رمزگذاری آنها می باشد. این تضمین می کند که داده های حساس می توانند به طور ایمن ذخیره و منتقل شوند.

بیایید به کدها بپردازیم تا بفهمیم این روش ها چگونه کار می کنند و چگونه می توانید از آنها استفاده کنید. کد زیر را برای این فایل اضافه کنید:

 using System.Security.Cryptography; using System.Text; using System.Text.Json; namespace BlazorApp9.Components.Helpers; public static class EncryptionHelper { private static readonly string EncryptionKey = "your-encryption-key"; private static byte[] GetKeyBytes(string key) { byte[] keyBytes = Encoding.UTF8.GetBytes(key); Array.Resize(ref keyBytes, 32); return keyBytes; } public static string Encrypt(string plainText) { byte[] iv = new byte[16]; byte[] array; using (Aes aes = Aes.Create()) { aes.Key = GetKeyBytes(EncryptionKey); aes.IV = iv; ICryptoTransform encryptor = aes.CreateEncryptor(aes.Key, aes.IV); using (MemoryStream memoryStream = new MemoryStream()) { using (CryptoStream cryptoStream = new CryptoStream((Stream)memoryStream, encryptor, CryptoStreamMode.Write)) { using (StreamWriter streamWriter = new StreamWriter((Stream)cryptoStream)) { streamWriter.Write(plainText); } array = memoryStream.ToArray(); } } } return Convert.ToBase64String(array); } public static string Decrypt(string cipherText) { byte[] iv = new byte[16]; byte[] buffer = Convert.FromBase64String(cipherText); using (Aes aes = Aes.Create()) { aes.Key = GetKeyBytes(EncryptionKey); aes.IV = iv; ICryptoTransform decryptor = aes.CreateDecryptor(aes.Key, aes.IV); using (MemoryStream memoryStream = new MemoryStream(buffer)) { using (CryptoStream cryptoStream = new CryptoStream((Stream)memoryStream, decryptor, CryptoStreamMode.Read)) { using (StreamReader streamReader = new StreamReader((Stream)cryptoStream)) { return streamReader.ReadToEnd(); } } } } } public static string SerializeAndEncrypt<T>(T data) { var jsonString = JsonSerializer.Serialize(data); return Encrypt(jsonString); } public static T DecryptAndDeserialize<T>(string cipherText) { var json = Decrypt(cipherText); return JsonSerializer.Deserialize<T>(json); } }

کلاس EncryptionHelper یک کلاس کمکی ثابت است که برای رمزگذاری و رمزگشایی داده ها طراحی شده است. این به ویژه برای ایمن سازی اطلاعات حساس در برنامه Blazor مفید است.

کلاس بالا یک فیلد static readonly EncryptionKey را تعریف می کند که کلید رمزگذاری را نگه می دارد. این کلید برای هر دو فرآیند رمزگذاری و رمزگشایی بسیار مهم است. مهم است که از یک کلید قوی و ایمن ذخیره شده استفاده کنید.

متد GetKeyBytes کلید رشته را به یک آرایه بایت تبدیل می کند و طول آن 32 بایت است. این به این دلیل است که الگوریتم رمزگذاری AES به یک کلید 256 بیتی نیاز دارد که 32 بایت طول دارد.

روش Encrypt یک رشته plaintext را با استفاده از رمزگذاری AES رمزگذاری می کند. ابتدا یک بردار اولیه (IV) 16 بایتی ایجاد می کند که توسط الگوریتم AES مورد نیاز است. سپس این روش یک شی AES را با کلید رمزگذاری و IV تنظیم می کند و از یک CryptoStream برای نوشتن داده های رمزگذاری شده در یک جریان حافظه استفاده می کند. سپس این داده های رمزگذاری شده برای ذخیره سازی و انتقال آسان به یک رشته base64 تبدیل می شوند.

روش Decrypt عمل معکوس را انجام می دهد. یک رشته base64 را به یک آرایه بایتی تبدیل می کند، شی AES را با همان کلید و IV تنظیم می کند و از یک CryptoStream برای خواندن داده های رمزگشایی شده از جریان حافظه استفاده می کند. نتیجه رشته متن ساده اصلی است.

کلاس EncryptionHelper دو روش برای مدیریت ساختارهای داده پیچیده ارائه می دهد: SerializeAndEncrypt و DecryptAndDeserialize . روش SerializeAndEncrypt ابتدا یک شی را با استفاده از JsonSerializer.Serialize به یک رشته JSON سریال می کند و سپس این رشته JSON را با استفاده از روش Encrypt رمزگذاری می کند. این اجازه می دهد تا اشیاء پیچیده به صورت ایمن در قالب رمزگذاری شده ذخیره شوند.

متد DecryptAndDeserialize یک رشته JSON رمزگذاری شده را به شکل اصلی خود رمزگشایی می کند و سپس با استفاده از JsonSerializer.Deserialize آن را به یک شی از نوع T تبدیل می کند. این ترکیب رمزگشایی و سریال‌زدایی تضمین می‌کند که داده‌های پیچیده را می‌توان به طور ایمن بازیابی کرد و در برنامه مورد استفاده قرار داد.

نحوه اتصال انقضا و رمزگذاری به رابط کاربری

اکنون یک جزء Blazor ( Home.razor ) را تحلیل می کنیم که به کاربران اجازه می دهد داده های رمزگذاری شده را در حافظه محلی مرورگر ذخیره و بازیابی کنند. این تضمین می کند که اطلاعات حساس محافظت می شوند و به طور خودکار در صورت عدم نیاز منقضی می شوند.

این رویکرد سهولت ذخیره سازی محلی را با امنیت رمزگذاری ترکیب می کند و راه حلی قوی برای مدیریت داده های کاربر در برنامه های کاربردی وب ارائه می دهد. بیایید وارد کد شویم تا ببینیم چگونه کار می کند.

 @page "/" @using BlazorApp9.Components.Helpers @inject Blazored.LocalStorage.ILocalStorageService localStorage @rendermode RenderMode.InteractiveServer <h3>Local Storage Example</h3> <input @bind-value="@inputData" /> <button @onclick="StoreData">Store Data</button> <button @onclick="RetrieveData">Retrieve Data</button> <p>The retrieved data from the LocalStorage: @storedData </p> @code { private const string dataKey = "localStorageKey"; private string? storedData; private string? inputData; bool isDataLoaded = false; private async Task StoreData() { if (!string.IsNullOrWhiteSpace(inputData)) { string encryptData = EncryptionHelper.SerializeAndEncrypt(inputData); await LocalStorageHelper.SetItemAsyncWithExpiry(localStorage, dataKey, TimeSpan.FromMinutes(30), encryptData); inputData = ""; } } protected override async Task OnAfterRenderAsync(bool firstRender) { if (firstRender && !isDataLoaded) { await RetrieveData(); isDataLoaded = true; StateHasChanged(); } } private async Task RetrieveData() { string encryptData = await LocalStorageHelper.GetItemAsyncWithExpiry<string>(localStorage, dataKey); storedData = encryptData != null ? EncryptionHelper.DecryptAndDeserialize<string>(encryptData) : "Data not found or expired."; } }

در کد بالا، روش StoreData تحلیل می‌کند که آیا inputData معتبر است، آن را با استفاده از EncryptionHelper.SerializeAndEncrypt رمزگذاری می‌کند، و با استفاده از LocalStorageHelper.SetItemAsyncWithExpiry در حافظه محلی با انقضای 30 دقیقه‌ای ذخیره می‌کند. سپس قسمت ورودی پاک می شود.

روش OnAfterRenderAsync پس از رندر اولیه کامپوننت، داده ها را از حافظه محلی بازیابی می کند. این تضمین می کند که داده های ذخیره شده قبلی در هنگام نمایش صفحه برای اولین بار بارگذاری می شوند. یک بار اجرا می شود، isDataLoaded روی true تنظیم می کند و برای به روز رسانی رابط کاربری (UI) StateHasChanged فراخوانی می کند.

روش RetrieveData داده ها را با استفاده از LocalStorageHelper.GetItemAsyncWithExpiry از حافظه محلی واکشی می کند. اگر داده‌ها یافت شوند و معتبر باشند، با استفاده از EncryptionHelper.DecryptAndDeserialize ، آن‌ها را رمزگشایی و از فهرست خارج می‌کند. اگر نه، storedData روی « Data not found or expired.

ویدئوی بالا نشان می دهد که چگونه می توانید مفاهیم مورد بحث در این راهنما را در یک برنامه وب پیاده سازی کنید.

نتیجه

Blazored.LocalStorage یک راه حل قدرتمند و آسان برای مدیریت اطلاعات کاربر در برنامه های Blazor ارائه می دهد. ادغام آن مزایای متعددی از جمله مدیریت وضعیت بهبودیافته، عملکرد بهبود یافته و تجربه کاربری بهتر را به همراه دارد.

پس از خواندن این مقاله و امتحان کردن کد برای خودتان، باید بتوانید قابلیت های ذخیره سازی محلی را در هر پروژه Blazor بگنجانید. این به شما کمک می کند تا پتانسیل کامل ذخیره سازی سمت مشتری را در برنامه های وب خود باز کنید.

خبرکاو