Blazor and Browser Local Storage using Blazored.LocalStorage

Blazored.LocalStorage

Install-Package Blazored.LocalStorage -Version 3.0.0

Note: This is for .NET 5.0.

Example:

Program.cs of Blazor Client

using Blazored;
using Blazored.LocalStorage;

public static async Task Main(string[] args)
{
     builder.Services.AddScoped<ILocalStorageService, LocalStorageService>();

}

CartStateProvider.razor in Blazor Client

@inject Blazored.LocalStorage.ILocalStorageService localStorage

// Retrieve the Shopping Cart from Local Storage (in the browser)
ShoppingCart = await localStorage.GetItemAsync<Cart>("MyShoppingCart");

// Update the Shopping Cart to Local Storage
await localStorage.SetItemAsync("MyShoppingCart", ShoppingCart);

App.razor in Blazor Client

<CustomersdbStore.Client.Shared.CartStateProvider>
    <Router AppAssembly="@typeof(Program).Assembly">
        <Found Context="routeData">
            <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
        </Found>
        <NotFound>
            <LayoutView Layout="@typeof(MainLayout)">
                <p>Sorry, there's nothing at this address.</p>
            </LayoutView>
        </NotFound>
    </Router>
</CustomersdbStore.Client.Shared.CartStateProvider>

TestCart.razor

@page "/TestCart"

<h3>TestCart</h3>

@if (AllProducts != null)
{

    <h2>Select an item</h2>
    //Display the list of products. Call ProductSelected when one is selected
    <select size="4" style="width:100%;" @onchange="ProductSelected">
        @foreach (var product in AllProducts)
        {
            <option value="@product.ItemId.ToString()">@product.Name</option>
        }
    </select>
    <br />

    // Show the selected product
    @if (SelectedProduct != null && ShowItem == true)
    {
        <div style="padding:1vw;background-color:lightgray;">
            <table cellpadding="5" cellspacing="5">
                <tr>
                    <td align="right" valign="top"><strong>Name:</strong></td>
                    <td align="left" valign="top">@SelectedProduct.Name</td>
                </tr>
                <tr>
                    <td align="right" valign="top"><strong>Description:</strong></td>
                    <td align="left" valign="top">@SelectedProduct.Description</td>
                </tr>
                <tr>
                    <td align="right" valign="top"><strong>Price:</strong></td>
                    <td align="left" valign="top">$@SelectedProduct.PricePerUnitSale</td>
                </tr>
                <tr>
                    <td align="right" valign="top"><strong>Add To Cart:</strong></td>
                    <td align="left" valign="top">
                        Quantity:
                        <input @bind="Quantity" />
                        <button @onclick="AddToCart">Add</button>
                    </td>
                </tr>
            </table>
        </div>
    }

    // Show the cart contents if there are items in it.
    @if (CartStateProvider != null && CartStateProvider.ShoppingCart.Items.Count > 0)
    {
        <br />
        <h3>Your Cart:</h3>
        <h4>Total: $@CartStateProvider.ShoppingCart.Total</h4>
        <table cellpadding="5" cellspacing="5">
            @foreach (var item in CartStateProvider.ShoppingCart.Items)
            {
                <tr>
                    <td colspan="2">
                        <hr />
                    </td>
                </tr>
                <tr>
                    <td align="right" valign="top"><strong>Name:</strong></td>
                    <td align="left" valign="top">@item.Product.Name</td>
                </tr>
                <tr>
                    <td align="right" valign="top"><strong>Description:</strong></td>
                    <td align="left" valign="top">@item.Product.Description</td>
                </tr>
                <tr>
                    <td align="right" valign="top"><strong>Price:</strong></td>
                    <td align="left" valign="top">$@item.Product.PricePerUnitSale</td>
                </tr>
                <tr>
                    <td align="right" valign="top"><strong>Quantity:</strong></td>
                    <td align="left" valign="top">@item.Quantity</td>
                </tr>
                <tr>
                    <td align="right" valign="top"><strong>Total:</strong></td>
                    <td align="left" valign="top">$@item.Total</td>
                </tr>
                <tr>
                    <td colspan="2">
                        @*Clicking this button passes the item so we can remove it*@
                        <button @onclick="@(() => RemoveItem(@item))">Remove</button>
                    </td>
                </tr>
            }
        </table>
        <br />
        <h4>Total: $@CartStateProvider.ShoppingCart.Total</h4>
    }

}

@code {

    // Cascading Parameters and Values flow down the entire component tree
    [CascadingParameter] CartStateProvider CartStateProvider { get; set; }

    bool ShowItem = false;
    int CartItemIndex = 0;
    string Quantity = "1";
    List<Product> AllProducts;
    Product SelectedProduct;

    void ProductSelected(ChangeEventArgs args)
    {
        // User clicked on an item in the list.
        // Show the product and give them an option to add to cart.
        SelectedProduct = (from x in AllProducts
                           where x.ItemId == Convert.ToInt32(args.Value)
                           select x).First();
        Quantity = "1";
        ShowItem = true;
    }

    async Task AddToCart()
    {
        // Create a new item for the shopping cart
        var item = new CartProduct
        {
            Product = SelectedProduct,
            Quantity = Convert.ToInt32(Quantity)
        };
        // Add it to the cart
        CartStateProvider.ShoppingCart.Items.Add(item);
        // Save to local storage
        await CartStateProvider.SaveChangesAsync();
        // Stop displaying the selected item
        ShowItem = false;
    }

    async Task RemoveItem(CartProduct Item)
    {
        // User clicked a Remove button to remove an item from the cart.
        CartStateProvider.ShoppingCart.Items.Remove(Item);
        // Update the cart - save to localstorage
        await CartStateProvider.SaveChangesAsync();
    }

    protected override void OnInitialized()
    {
        // Create the products we can purchase
        AllProducts = new List<Product>();

        AllProducts.Add(new Product
        {
            ItemId = 1,
            Name = "1 lb. Bag of Yirgacheffe Coffee Beans",
            Description = "Yirgacheffe is a rich Ethiopian coffee that will poke your eye out",
            PricePerUnitSale = (decimal)10.99
        });

        AllProducts.Add(new Product
        {
            ItemId = 2,
            Name = "Tablet Show Coffee Mug",
            Description = "Back by popular demand for a limited time, the long-coveted Tablet Show Coffee Mug",
            PricePerUnitSale = (decimal)4.99
        });
    }
}

Sources:

https://www.syncfusion.com/faq/blazor/general/how-do-i-access-browser-local-storage-in-blazor

https://www.nuget.org/packages/Blazored.LocalStorage/