---
sidebar_position: 2
title: Stocker nos données
---

## Utiliser le stockage des données en local

Nous avons utiliser notre fichier `fake-data.json` pour remplir notre grille, mais dans les étapes suivantes nous allons devoir ajouter / modifier les données.

Le plus simple serait de modifier directement le fichier `fake-data.json` mais cette solution est trop simple 😁.

Pour cela nous allons utiliser le `LocalStorage` du navigateur.

## Utilisation de Blazored.LocalStorage

Afin de faciliter sont utilisation nous allons utiliser le nuget `Blazored.LocalStorage`.

Installer le package avec la commande `Install-Package Blazored.LocalStorage`

## Parametrer Blazored.LocalStorage

Ouvrer le fichier `Program.cs` et ajouter la modification en surbrillance :

```csharp title="Program.cs"
...

builder.Services
   .AddBlazorise()
   .AddBootstrapProviders()
   .AddFontAwesomeIcons();

// highlight-next-line
builder.Services.AddBlazoredLocalStorage();

var app = builder.Build();

...
```

## Enregistrer les données dans le LocalStorage	

Ouvrez le fichier `Pages/List.razor.cs` et le modifier comme suite :

```csharp title="Pages/List.razor.cs"
public partial class List
{
	private List<Item> items;

	private int totalItem;

	[Inject]
	public HttpClient Http { get; set; }

	[Inject]
	public ILocalStorageService LocalStorage { get; set; }

	[Inject]
	public NavigationManager NavigationManager { get; set; }

	protected override async Task OnAfterRenderAsync(bool firstRender)
	{
		// Do not treat this action if is not the first render
		if (!firstRender)
		{
			return;
		}

		var currentData = await LocalStorage.GetItemAsync<Item[]>("data");

		// Check if data exist in the local storage
		if (currentData == null)
		{
			// this code add in the local storage the fake data (we load the data sync for initialize the data before load the OnReadData method)
			var originalData = Http.GetFromJsonAsync<Item[]>($"{NavigationManager.BaseUri}fake-data.json").Result;
			await LocalStorage.SetItemAsync("data", originalData);
		}
	}

	private async Task OnReadData(DataGridReadDataEventArgs<Item> e)
	{
		if (e.CancellationToken.IsCancellationRequested)
		{
			return;
		}

		// When you use a real API, we use this follow code
		//var response = await Http.GetJsonAsync<Data[]>( $"http://my-api/api/data?page={e.Page}&pageSize={e.PageSize}" );
		var response = (await LocalStorage.GetItemAsync<Item[]>("data")).Skip((e.Page - 1) * e.PageSize).Take(e.PageSize).ToList();

		if (!e.CancellationToken.IsCancellationRequested)
		{
			totalItem = (await LocalStorage.GetItemAsync<List<Item>>("data")).Count;
			items = new List<Item>(response); // an actual data for the current page
		}
	}
}
```

## Notion : Blazor Storage

### Conserver l’état entre les sessions de navigateur

En règle générale, conservez l’état entre les sessions de navigateur où les utilisateurs créent activement des données, et non simplement des données qui existent déjà.

Pour conserver l’état entre les sessions de navigateur, l’application doit conserver les données dans un autre emplacement de stockage que la mémoire du navigateur. 
La persistance de l’État n’est pas automatique. Vous devez prendre des mesures lors du développement de l’application pour implémenter la persistance des données avec état.

La persistance des données est généralement requise uniquement pour l’état de valeur élevée que les utilisateurs ont consacrés à la création. 

Dans les exemples suivants, l’état persistant fait gagner du temps ou contribue à des activités commerciales :
* Web Forms à plusieurs étapes : il est fastidieux pour un utilisateur de saisir à nouveau des données pour plusieurs étapes terminées d’un formulaire Web à plusieurs étapes si leur état est perdu. Un utilisateur perd l’État dans ce scénario s’il quitte le formulaire et le retourne plus tard.
* Paniers d’achat : tout composant commercialement important d’une application qui représente un chiffre d’affaires potentiel peut être maintenu. Un utilisateur qui perd son état et, par conséquent, son panier, peut acheter moins de produits ou de services lorsqu’ils reviennent sur le site ultérieurement.

Une application peut conserver uniquement l’état de l' application. Les interfaces utilisateur ne peuvent pas être rendues persistantes, telles que les instances de composant et leurs arborescences de rendu. Les composants et les arborescences de rendu ne sont généralement pas sérialisables. Pour conserver l’état de l’interface utilisateur, tel que les nœuds développés d’un contrôle Tree View, l’application doit utiliser du code personnalisé pour modéliser le comportement de l’état de l’interface utilisateur en tant qu’État de l’application sérialisable.

### Emplacement de conservation de l’État

Les emplacements communs existent pour l’état de persistance :
* Stockage côté serveur
* URL
* Stockage du navigateur
* Service de conteneur d’État en mémoire

### Stockage du navigateur

Pour les données temporaires que l’utilisateur crée activement, un emplacement de stockage couramment utilisé est celui des `localStorage` & `sessionStorage` regroupements et du navigateur :
* `localStorage` est limité à la fenêtre du navigateur. Si l’utilisateur recharge la page ou ferme et ouvre à nouveau le navigateur, l’état persiste. Si l’utilisateur ouvre plusieurs onglets de navigateur, l’État est partagé à travers les onglets. Les données sont conservées dans `localStorage` jusqu’à ce qu’elles soient explicitement effacées.
* `sessionStorage` est étendu à l’onglet navigateur. Si l’utilisateur recharge l’onglet, l’état persiste. Si l’utilisateur ferme l’onglet ou le navigateur, l’État est perdu. Si l’utilisateur ouvre plusieurs onglets de navigateur, chaque onglet possède sa propre version indépendante des données.

:::info

`localStorage` et `sessionStorage` peuvent être utilisés dans les applications Blazor WebAssembly, mais uniquement en écrivant du code personnalisé ou à l’aide d’un package tiers.

:::

:::caution

Les utilisateurs peuvent afficher ou altérer les données stockées dans `localStorage` et `sessionStorage`.

:::

### Ou trouver les données de session locales

Tout les navigateurs récents permettent de visualiser les données de session locales.

Pour cela, dans votre navigateur, appuyer sur la touche `F12`, dans la nouvelle fenêtre :

* Sélectionner l'onglet `Application`
* Dans `Storage` :
	* Sélectionner `Local Storage`
	* Sélectionner l'url de votre application

Vous avez désormais accès à toutes les données stocké, vous pouvez les modifier ansi que les supprimer.

![Ou trouver les données de session locales](/img/ajouter-item/local-session-location.png)
