day23 Sample

Blazor30days/Model/Day23SampleModel.cs

@@ -0,0 +1,7 @@
+namespace Blazor30days.Model
+{
+    public class Day23SampleModel
+    {
+        public string Value { get; set; }
+    }
+}

Blazor30days/Pages/Day23Sample.razor

@@ -0,0 +1,45 @@
+@page "/day23sample"
+@inject Day23SampleModel Day23SampleModel
+@inject IJSRuntime JSRuntime;
+
+<h3>Day23Sample</h3>
+
+<p>
+    Day23SampleModel.Value: @Day23SampleModel.Value
+</p>
+
+<input @bind="Day23SampleModel.Value" />
+
+
+<p>
+    LocalStorage: @localStorageValue
+</p>
+<input @bind="localStorageValue" />
+<button @onclick="Save">Save</button>
+
+<NavLink href="/day23.2sample">Go To Day23Sample2</NavLink>
+
+@code {
+    private string localStorageValue;
+
+    protected override async Task OnInitializedAsync()
+    {
+        localStorageValue = await GetLocalStorageItem("test");
+        await base.OnInitializedAsync();
+    }
+
+    public async Task Save()
+    {
+        await SetLocalStorageItem("test", this.localStorageValue);
+    }
+
+    public async Task SetLocalStorageItem(string key, string value)
+    {
+        await JSRuntime.InvokeVoidAsync("exampleJsFunctions.setLocalStorageItem", key, value);
+    }
+
+    public async Task<string> GetLocalStorageItem(string key)
+    {
+        return await JSRuntime.InvokeAsync<string>("exampleJsFunctions.getLocalStorageItem", key);
+    }
+}

Blazor30days/Pages/Day23Sample2.razor

@@ -0,0 +1,16 @@
+@page "/day23.2sample"
+@inject Day23SampleModel Day23SampleModel
+
+<h3>Day23Sample2</h3>
+
+<p>
+    Day23SampleModel.Value: @Day23SampleModel.Value
+</p>
+
+<input @bind="Day23SampleModel.Value" />
+
+<NavLink href="/day23sample">Go To Day23Sample</NavLink>
+
+@code {
+
+}

Blazor30days/Pages/Index.razor

@@ -20,9 +20,9 @@ Welcome to your new app.
 </div>
 
 @code{
-    IEnumerable<Route> Routes = new List<int>
+    IEnumerable<Route> Routes = new List<string>
 {
-        12,13,14,15,16,17,18,19,21,22
+        "12","13","14","15","16","17","18","19","21","22","23","23.2"
     }.Select(x => new Route
 {
     Url = $"day{x}sample",

Blazor30days/Program.cs

@@ -7,6 +7,7 @@
 using Microsoft.Extensions.Configuration;
 using Microsoft.Extensions.DependencyInjection;
 using Microsoft.Extensions.Logging;
+using Blazor30days.Model;
 
 namespace Blazor30days
 {
@@ -17,6 +18,7 @@ public static async Task Main(string[] args)
             var builder = WebAssemblyHostBuilder.CreateDefault(args);
             builder.RootComponents.Add<App>("app");
             builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
+            builder.Services.AddSingleton<Day23SampleModel>();
             await builder.Build().RunAsync();
         }
     }

Blazor30days/wwwroot/js/exampleJsInterop.js

@@ -20,5 +20,11 @@
             .then(data => {
                 console.log(data);
             });
+    },
+    setLocalStorageItem: function (key, value) {
+        localStorage.setItem(key, value);
+    },
+    getLocalStorageItem: function (key) {
+        return localStorage.getItem(key);
     }
 };