Skip to content

Latest commit

History

45 Commits

Folders and files

NameName
Last commit message
Last commit date

Repository files navigation

Blazor Local and Session Storage Support

Installation

PM>Install-Package Cloudcrate.AspNetCore.Blazor.Browser.Storage

See it in Action

Check out Steve Sanderson's demo at NDC Minnesota, at minute 48

Usage

Add Services to Dependency Injection

services.AddStorage();

Add Javascript file to your index.html or _Host.cshtml page in <body> after either <script src="_framework/blazor.webassembly.js"></script> or <script src="_framework/blazor.server.js"></script> depending on what architecture you are using.

<scriptsrc="_content/Cloudcrate.AspNetCore.Blazor.Browser.Storage/Storage.js"></script>

Client-Side

Inject and use Storage

@usingCloudcrate.AspNetCore.Blazor.Browser.Storage;@inject LocalStorageStorage
<inputtype="text"@bind="value" />
<button@onclick="SetValue">Set</button>
<button@onclick="GetValue">Get</button>
@code{stringvalue;
voidSetValue()
{Storage.SetItem("storageKey", value);
}voidGetValue()
{value=Storage.GetItem("storageKey");
}}

Server-Side

Inject and use Storage

@usingCloudcrate.AspNetCore.Blazor.Browser.Storage;@inject LocalStorageStorage
<inputtype="text"@bind="value" />
<button@onclick="SetValue">Set</button>
<button@onclick="GetValue">Get</button>
@code{stringvalue;
asyncTaskSetValue()
{awaitStorage.SetItemAsync("storageKey", value);
}asyncTaskGetValue()
{value=awaitStorage.GetItemAsync("storageKey");
}}

Events

Using storage native event: StorageEvent

protectedoverridevoidOnInit(){Storage.StorageChanged+=HandleStorageChanged;}voidHandleStorageChanged(objectsender,StorageEventArgse){Console.WriteLine($"Value for key {e.Key} changed from {e.OldValue} to {e.NewValue}");}publicvoidDispose(){Storage.StorageChanged-=HandleStorageChanged;}

Contributors

About

A library for Blazor local and session storage support.

Topics

Resources

Stars

115 stars

Watchers

14 watching

Forks

Releases

Packages

Used by

Contributors

Languages