Blazor non possiede una API specifica per manipolare il contenuto dei cookie del browser, pertanto se dovessimo avere la necessità di interagire con questa funzionalità dobbiamo sfruttare l'interop con JavaScript.
Immaginiamo, per esempio, di voler migliorare la pagina Counter.razor presente nel template di default di Visual Studio, memorizzando il valore corrente in un cookie così da poterlo recuperare a un successivo reload.
Come primo passo, dobbiamo creare un piccolo modulo JavaScript, che chiameremo Counter.razor.js:
export function saveValue(value) { document.cookie = `counter=${value};max-age=3600`; } export function getValue() { const cookie = document.cookie; const value = cookie.split(';').find(c => c.startsWith('counter=')); if (value) { return value.split('=')[1]; } return null; }
La prima funzione saveValue ci permette di memorizzare il valore passato come parametro all'interno di un cookie denominato counter, mentre la seconda recupera il valore dal medesimo cookie, se presente.
Ora possiamo modificare la pagina Counter.razor, per sfruttare il modulo che abbiamo creato:
@inject IJSRuntime JS @page "/counter" .. altro codice qui .. @code { private int currentCount = 0; IJSObjectReference? module; protected async override Task OnAfterRenderAsync(bool firstRender) { module = await JS.InvokeAsync<IJSObjectReference>( "import", "./Pages/Counter.razor.js"); var savedValue = await module.InvokeAsync<string>("getValue"); int.TryParse(savedValue, out currentCount); this.StateHasChanged(); } private async Task IncrementCount() { currentCount++; await module?.InvokeVoidAsync("saveValue", currentCount); } }
Abbiamo effettuato l'override di OnAfterRenderAsync dove importiamo il modulo all'interno di una IJSObjectReference e invochiamo successivamente la funzione getValue. Dovendo gestire il caso in cui il cookie non sia presente - e anche per aumentare la robustezza del codice - importiamo questo valore come string per poi provare il parsing verso un valore intero.
La chiamata a StateHasChanged farà in modo che, l'eventuale modifica di currentCount, si rifletta nel markup della pagina.
Il salvataggio del valore avviene invece all'interno di IncrementCount, invocata al click del button, dove chiamiamo la funzione saveValue.
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Creare gruppi di client per Event Grid MQTT
Configurare dependabot per aggiornare le dipendenze di terze parti con GitHub Actions
Utilizzare i primary constructor in C#
Migrare una service connection a workload identity federation in Azure DevOps
Modificare i metadati nell'head dell'HTML di una Blazor Web App
.NET Conference Italia 2023
Effettuare il deploy di immagini solo da container registry approvati in Kubernetes
Supportare il sorting di dati tabellari in Blazor con QuickGrid
Ottimizzare il mapping di liste di tipi semplici con Entity Framework Core
Visualizzare le change sul plan di Terraform tramite le GitHub Actions
Sfruttare i KeyedService in un'applicazione Blazor in .NET 8
Eseguire operazioni sui blob con Azure Storage Actions
I più letti di oggi
- Utilizzare Docker Compose con Azure App Service
- Utilizzare QuickGrid di Blazor con Entity Framework
- Modernizzare le applicazioni WPF e Windows Forms con Blazor
- ASP 3 per esempi
- annunciato #netstandard 2.1. .NET Core lo supporterà a partire da #netcore3, così come le prossime versione di #xamarin, #mono e #unity.il supporto per #netfx 4.8, invece, non ci sarà. https://aspit.co/bq2
- Steel Style CheckBox per Silverlight 4.0