Skip to content

HTML5 Storage API implementation for Microsoft Blazor

License

Notifications You must be signed in to change notification settings

romansattler/Storage

 
 

Repository files navigation

Build Package Version NuGet Downloads License

Blazor Extensions

Blazor Extensions are a set of packages with the goal of adding useful things to Blazor.

Blazor Extensions Storage

This package wraps HTML5 Storage APIs. Both Session and Local storage types are supported.

Sample configuration

Setup

Include the following snippet in the the head section of the Index page (wwwroot/index.html).

<script src="_content/Blazor.Extensions.Storage/Storage.js"></script>

The following snippet shows how to setup the storage wrapper by registering it for dependency injection in the Startup.cs of the application.

public void ConfigureServices(IServiceCollection services)
{
    // Add Blazor.Extensions.Storage
    // Both ISessionStorage and ILocalStorage are registered
    services.AddStorage();
}

Usage

The following snippet shows how to consume the storage API in a Blazor component.

@inject ISessionStorage sessionStorage
@inject ILocalStorage localStorage

@functions {
  protected override async Task OnInitAsync()
  {
        var key = "forecasts";
        await sessionStorage.SetItem<WeatherForecast[]>(key, forecasts);
        await localStorage.SetItem<WeatherForecast[]>(key, forecasts);
        var fromSession = await sessionStorage.GetItem<WeatherForecast[]>(key);
        var fromLocal = await localStorage.GetItem<WeatherForecast[]>(key);
  }
}

If you want to consume it outside of a cshtml based component, then you can use the Inject attribute to inject it into the class.

[Inject]
protected ISessionStorage sessionStorage;

[Inject]
protected ILocalStorage localStorage;

public Task LogSomething()
{
        var key = "forecasts";
        await sessionStorage.SetItem<WeatherForecast[]>(key, forecasts);
        await localStorage.SetItem<WeatherForecast[]>(key, forecasts);
        var fromSession = await sessionStorage.GetItem<WeatherForecast[]>(key);
        var fromLocal = await localStorage.GetItem<WeatherForecast[]>(key);
}

Contributions and feedback

Please feel free to use the component, open issues, fix bugs or provide feedback.

Contributors

The following people are the maintainers of the Blazor Extensions projects:

About

HTML5 Storage API implementation for Microsoft Blazor

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • C# 48.5%
  • HTML 34.5%
  • TypeScript 13.7%
  • JavaScript 3.3%